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