London 2018 September 28

Berlin 2018 October 24-26

USA 2018 October 11-12

  1. Home
  2. Documentation
  3. Frontend
  4. CSS Preprocessors: Sass, LESS, etc.

You are browsing the Symfony 4 documentation, which changes significantly from Symfony 3.x. If your app doesn't use Symfony 4 yet, browse the Symfony 3.4 documentation.

CSS Preprocessors: Sass, LESS, etc.

4.1 version
Maintained
3.4 4.2 master
Unmaintained
3.3 4.0
edit this page

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.