- 安装依赖:
yarn add postcss-aspect-ratio-mini postcss-preset-env postcss-cssnext postcss-flexbugs-fixes postcss-loader postcss-px-to-viewport postcss-viewport-units postcss-write-svg -D
- 根目录创建
postcss.config.js
/*
* @Description:
* @version:
* @Author: 周凯
* @Date: 2020-07-17 09:27:23
* @LastEditors: 周凯
* @LastEditTime: 2020-07-17 09:30:30
*/
module.exports = {
plugins: {
"postcss-flexbugs-fixes": {},
"postcss-preset-env": {
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
},
"postcss-aspect-ratio-mini": {},
"postcss-px-to-viewport": {
viewportWidth: 1920, // (Number) The width of the viewport.
viewportHeight: 1080, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: "vw", // (String) Expected units.
selectorBlackList: [".ignore", ".hairlines"], // (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.
},
"postcss-write-svg": {
utf8: false,
},
"postcss-preset-env": {},
"postcss-viewport-units": {},
cssnano: {
//旧的 --坑点
// preset: "advanced",
// autoprefixer: false,
// "postcss-zindex": false
//新配置继续使用高级配置,按照这个配置
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false,
},
},
},
};
- 效果