Постпроцессоры Webpack
Весь современный код CSS
должны распознавать устаревшие браузеры. Поэтому, нужно прогонять этот CSS через постпроцессор, чтобы большинство браузеров понимало современные стили.
Установим postcss-loader загрузчик CSS файлов для пост-обработки, должен работать с каким нибудь плагином:
npm install postcss-loader --save-dev
Установим postcss-preset-env - плагин для PostCSS
, который конвертирует современный CSS
в код, понятный большинству браузеров, включением необходимых полифилов:
npm install postcss-preset-env --save-dev
Общий вид кода:
webpack.config.jsimport MiniCssExtractPlugin from "mini-css-extract-plugin";
export default {
entry: "./src/index.js",
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: {
"postcss-preset-env": {
browsers: "last 3 versions",
},
},
},
},
},
],
},
],
},
};
Настройки для PostCSS
задаются как в файле webpack.config.js
так и в собственном файле настроек postcss.config.js
.