PostCSS и автоматическое добавление префиксов (postcss-loader)

PostCSS - это инструмент пост-обработки CSS, который может трансформировать ваш CSS множеством крутых способов, например aавтоматическое добавление префиксов, ` проверка соблюдения стандарта оформления кода`_ и многими другими!

Для начала, скачайте postcss-loader и любые желаемые вами плагины, вроде autoprefixer:

1
$ yarn add --dev postcss-loader autoprefixer

Далее, создайте файл postcss.config.js в корне вашего проекта:

1
2
3
4
5
6
7
8
9
module.exports = {
    plugins: {
        // добавьте любые желаемые вами плагины,
        // но убедитесь в том, что устанавливаете их через yarn или npm!

        // добавьте конфигурацию browserslist к package.json (см. ниже)
        autoprefixer: {}
    }
}

Далее, включите загрузчик в Encore!

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

Encore
    // ...
+     .enablePostCssLoader()
;

Вот и всё! Теперь postcss-loader будет использовать для всех файлов CSS, Sass, и др. Вы также можете передавать опции в postcss-loader, передавая обратный вызов:

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

Encore
    // ...
+     .enablePostCssLoader((options) => {
+         options.config = {
+             path: 'config/postcss.config.js'
+         };
+     })
;

Добавление browserslist в package.json

autoprefixer (и множеству других инструментов) нужно знать, какие браузеры вы хотите поддерживать. Лучшей практикой является конфигурация этого напрямую в вашем package.json (чтобы все инструменты могли его прочитать):

1
2
3
{
+     "browserslist": [ "last 2 versions", "ios >= 8" ]
}

См. browserslist, чтобы узнать больше деталей о синтаксисе.

Note

Encore использует babel-preset-env, которому также нужно знать, какие браузеры вы хотите поддерживать. Но он не читает ключ конфигурации browserslist. Вам нужно сконфигурировать браузеры отдельно через configureBabel().

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.