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

Дата обновления перевода 2024-07-25

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

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

Для начала, подключите его в webpack.config.js:

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

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

Затем перезапустите Encore. Когда вы это сделаете, он даст вам команду, которую вы можете выполнить, чтобы установить все недостающие зависимости. После выполнения этой команды и перезапуска Encore, вы закончили!

Далее, скачайте те плагины, которые вы хотите, вроде autoprefixer:

1
$ npm install autoprefixer --save-dev

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
// webpack.config.js
+ const path = require('path');

  Encore
      // ...
+     .enablePostCssLoader((options) => {
+         options.postcssOptions = {
+             // the directory where the postcss.config.js file is stored
+             config: path.resolve(__dirname, 'sub-dir', 'custom.config.js'),
+         };
+     })
  ;

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

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

1
2
3
4
5
{
+  "browserslist": [
+    "defaults"
+  ]
  }

Опция defaults рекомендована для большинства пользователей и будет эквивалентна следующему browserslist:

1
2
3
4
5
6
7
8
{
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead"
+  ]
  }

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