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

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

Для початку, підключіть його в webpack.config.js:

1
2
3
4
5
6

// webpack.config.js

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

Потім перезапустіть Encore. Коли ви це зробите, він дасть вам команду, яку ви можете виконати, щоб встановити всі залежності, яких не вистачає. Після виконання цієї команди і перезапуску Encore, ви закінчили!

Далі, завантажте ті плагіни, яки ви хочете, на кшталт autoprefixer:

1
2
3
4
5

# якщо ви використовуєте менеджер пакетів Yarn
$ yarn add autoprefixer --dev

# якщо ви використовуєте менеджер пакетів npm
$ 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'),
+         };
+     })
  ;

1
2
3
4
5

{
+  "browserslist": [
+    "defaults"
+  ]
  }

1
2
3
4
5
6
7
8

{
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead"
+  ]
  }