CSS Preprocessors: Sass, LESS, etc.

3.3 version

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(sassOptions) {
        // 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.