English spoken conference
Talks Workshops Register
  1. Home
  2. Documentation
  3. Frontend
  4. CSS Preprocessors: Sass, LESS, etc.
WARNING: You are browsing the documentation for Symfony 4.0 which is not maintained anymore. Consider upgrading your projects to Symfony 4.3.

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

CSS Preprocessors: Sass, LESS, etc.

4.0 version
Maintained
3.4 4.3 current 4.4 5.0 master
Unmaintained
3.3 4.1 4.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.