You are browsing the documentation for Symfony 3.3 which is not maintained anymore.
Consider upgrading your projects to Symfony 5.2.
CSS Preprocessors: Sass, LESS, etc.
CSS Preprocessors: Sass, LESS, etc.¶
Using Sass¶
To use the Sass pre-processor, install the dependencies:
1 | $ yarn add --dev sass-loader node-sass
|
And 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 less
|
And 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;
});
;
|
This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.