WARNING: You are browsing the documentation for Symfony 4.0 which is not maintained anymore. Consider upgrading your projects to Symfony 5.1.

CSS Preprocessors: Sass, LESS, etc.

4.0 version

Maintained

3.4 4.4 5.1 current 5.2 master

Unmaintained

3.3 4.1 4.2 4.3 5.0

CSS Preprocessors: Sass, LESS, etc.
- Using Sass
- Using LESS

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:

// 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:

// 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:

// 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:

// 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.