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

Дата оновлення перекладу 2024-05-29

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

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

Для початку, підключіть його в 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, щоб дізнатися більше деталей про синтаксис.