yarn add postcss-px-to-viewport -D
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 1920,
unitPrecision: 2,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: undefined,
include: undefined,
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 1920
}
}
}
但是注意一点 行内样式不能转换 查找到有style-vw-loader可以解决
安装完需要在vue.config.js
{
chainWebpack: (config) => {
config.module
.rule('vue')
.test(/\.vue$/)
.use('style-vw-loader')
.loader('style-vw-loader')
}
}
这个插件默认窗口宽度750px,只能转化vue文件的行内样式 不能转化ui库的行内样式....