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