CSS-предпроцессоры: Sass, LESS, и др.

Использование Sass

Чтобы использовать предпроцессор Sass, установите зависимости:

        1
        $ yarn add --dev sass-loader node-sass
    

И включите его вwebpack.config.js:

        1
2
3
4
5
6
7
        // webpack.config.js
// ...

Encore
    // ...
    .enableSassLoader()
;
    

Вот и всё! Все файлы, заканчивающиеся на .sass или .scss будут предварительно обработаны. Вы также можете передать опции в 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 = [...]
    });
;
    

Использование LESS

Чтобы использовать предпроцессор LESS, установите зависимости:

        1
        $ yarn add --dev less-loader less
    

И включите его в webpack.config.js:

        1
2
3
4
5
6
7
        // webpack.config.js
// ...

Encore
    // ...
    .enableLessLoader()
;
    

Вот и всё! Все файлы, заканчивающиеся на .less будут предварительно обработаны. Вы также можете передать опции в 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;
    });
;
    