CSS Preprocessors: Sass, LESS, etc.
Edit this pageWarning: You are browsing the documentation for Symfony 4.0, which is no longer maintained.
Read the updated version of this page for Symfony 6.3 (the current stable version).
CSS Preprocessors: Sass, LESS, etc.
Using Sass
To use the Sass pre-processor, install the dependencies:
1
$ yarn add --dev sass-loader node-sassAnd enable it in webpack.config.js:
1 2 3 4 5 6 7
// webpack.config.js
// ...
Encore
// ...
.enableSassLoader()
;That's it! All files ending in .sass or .scss will be pre-processed. You
can also pass options to sass-loader:
1 2 3 4 5 6 7 8 9 10
// webpack.config.js
// ...
Encore
// ...
.enableSassLoader(function(options) {
// https://github.com/sass/node-sass#options
// options.includePaths = [...]
});
;Using LESS
To use the LESS pre-processor, install the dependencies:
1
$ yarn add --dev less-loader lessAnd enable it in webpack.config.js:
1 2 3 4 5 6 7
// webpack.config.js
// ...
Encore
// ...
.enableLessLoader()
;That's it! All files ending in .less will be pre-processed. You can also pass
options to less-loader:
1 2 3 4 5 6 7 8 9 10 11
// webpack.config.js
// ...
Encore
// ...
.enableLessLoader(function(options) {
// https://github.com/webpack-contrib/less-loader#examples
// http://lesscss.org/usage/#command-line-usage-options
// options.relativeUrls = false;
});
;
