postcss.config.js 配置(vue移动端自适应)
作者：互联网
安装依赖
npm install postcss-write-svg postcss-px-to-viewport-multichange --D
直接在根目录下创建postcss.config.js
module.exports = {
plugins: {
// autoprefixer: {}, // cssnext中启用
// 'postcss-import': {},
// 'postcss-url': {},
// 'postcss-preset-env': {},
// 'postcss-aspect-ratio-mini': {},
'postcss-write-svg': { utf8: false },
'postcss-px-to-viewport-multichange': {
// 使用非官方开发的可以自定义针对UI库的处理函数的插件
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (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.
fontViewportUnit: 'vmin', // (String) Expected units for font.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
// selectorBlackList: [
// '.ignore',
// '.hairlines',
// /\.hairline[\w-_]*/,
// /\.van-hairline[\w-_]*/,
// ], // (Array) The selectors to ignore and leave as px.
// 以下为此插件新增配置项
// exclude: ['node_modules'],
// multiple: 100,
// rules: {
// path: 'vant',
// fn(pixels, translated) {
// return `${translated * 2}vw`;
// },
// },
},
cssnano: {},
},
};
重新跑一遍代码
标签：插件,vue,端自,px,Number,units,postcss,viewport 来源： https://blog.csdn.net/Squirrelworker/article/details/121495204