使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0

在vue-cli3.0中使用postcss-plugin-px2rem 插件
插件的作用是 自动将vue项目中的px转换为rem
postcss-plugin-px2rem优势:
因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性,它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。
所以我们可以利用这个特性,把项目中的 node_module 文件夹排除掉。这样如果我们项目中是用了,前端UI框架的话,就不会吧UI框架(Vant,Element等)中的 px单位转换成rem了
文档:
postcss-plugin-px2rem官方文档:https://www.npmjs.com/package/postcss-plugin-px2rem
postcss-pxtorem官方文档:https://www.npmjs.com/package/postcss-pxtorem
postcss-px2rem官方文档:https://www.npmjs.com/package/postcss-px2rem
安装插件(安装对应包)
npm i postcss-plugin-px2rem --save -dev
或
npm i postcss-pxtorem --save -dev
或
npm i postcss-loader --save-dev
配置方法
在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中(默认为空,如果没有这个文件自己写一个)
在vue-cli3中使用postcss-pxtorem和 postcss-px2rem 配置类似,如下
使用postcss-pxtorem 时vue.config.js配置
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({//这里是配置项,详见官方文档
rootValue : 1, // 换算的基数
selectorBlackList : ['weui','mu'], // 忽略转换正则匹配项
propList : ['*'],
}),
]
}
}
},
}
使用postcss-px2rem时的vue.config.js配置
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({ //配置项,详见官方文档
remUnit: 30
}), // 换算的基数
]
}
}
},
}
如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px