SymfonyWorld Online 2021 Summer Edition
June 17 – 18, 2021
SymfonyWorld Online 2021 Winter Edition
December 9 – 10, 2021
  1. Home
  2. Documentation
  3. Frontend
  4. CSS Preprocessors: Sass, LESS, etc.

Warning: You are browsing the documentation for Symfony 3.3, which is no longer maintained.

Read the updated version of this page for Symfony 5.3 (the current stable version).

CSS Preprocessors: Sass, LESS, etc.

3.3 version
Maintained
4.4 5.3 current 5.4 dev 6.0
Unmaintained
3.3 3.4 4.0 4.1 4.2 4.3 5.0 5.1 5.2

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.