px转rem
Sonder
2021-07-14
761字
2分钟
浏览 (2.9k)
1.安装三个包
"devDependencies": {
"lib-flexible": "^0.3.2",
"postcss-pxtorem": "^5.1.1",
"px2rem-loader": "^0.1.9"
}
2.vue.config.js 加入以下代码
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// 把px单位换算成rem单位
require('postcss-pxtorem')({
rootValue: 75, // 换算的基数(设计图750的根字体为32) 75 => 750 设计稿
selectorBlackList: ['.van'], // 要忽略的选择器并保留为px。
propList: ['*'], //可以从px更改为rem的属性。
minPixelValue: 2, // 设置要替换的最小像素值。
}),
],
},
},
},
}
3. 在mian.js引入文件
import 'lib-flexible/flexible';
完成!