Utilisation de SassSass

Pour utiliser Sass, ajoutons les packages nécessaires :

npm install sass-loader node-sass --dev

La configuration de la transpilation via WebPack Encore se fait dans le fichier webpack.config.js (fichier qui se trouve à la racine de l’application).

Ouvrez ce fichier et décommentez la ligne :

 .enableSassLoader()

Décommentez également, pour utiliser le préprocesseur Sass, la ligne :

  .addEntry(’app’, ’./assets/js/app.js’)

Cette ligne indique le point d’entrée de la transpilation.

Il existe également un fichier par défaut : assets/js/app.js, à la racine de votre application.

Il contient ce code :

/* 
* Welcome to your app’s main JavaScript file! 
* 
* We recommend including the built version of this JavaScript file 
* (and its CSS file) in your base layout (base.html.twig). 
*/ 
// any CSS you import will output into a single css file 
(app.css in this case) 
 
import ’../css/app.css’; 
 
// Need jQuery? Install it with "yarn add jquery", 
then uncomment to import it. 
 
// import $ from ’jquery’; 
 
console.log(’Hello Webpack Encore! Edit me in assets/js/app.js’);

La ligne :

import ’../css/app.css’;

indique que c’est ce fichier app.js qui va importer le css à partir du fichier app.css. Ce qui nous intéresse, c’est d’importer un fichier Sass. ...