``` npm
"postcss-flexbugs-fixes": "^4.2.0",
"postcss-loader": "^3.0.0",
"postcss-normalize": "^8.0.1",
"postcss-preset-env": "^6.7.0",
"postcss-px-to-viewport": "^1.1.1",
文件目录创建 postcss.config.js 文件
const postcssNormalize = require('postcss-normalize');
module.exports = {
plugins: [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
require('postcss-px-to-viewport')({
unitToConvert: 'px', // (String) unit to convert, by default, it is px.
viewportWidth: 375, // (Number) The width of the viewport.
viewportHeight: 667, // (Number) The height of the viewport.
unitPrecision: 5, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
fontViewportUnit: 'vw', // (String) Expected units for font.
selectorBlackList: ['.ignore'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
]
};
