使用vue移动端框架vantUi 根字体是37.5 和默认根字体75不一致,导致组件样式变小
1、不用px2rem-loader和lib-flexible搭配,而是使用:lib-flexible和postcss-pxtorem搭配,因为lib-flexible和postcss-pxtorem里面有一个过滤功能,可以让我们过滤掉以van开头的样式:在引入的postcssrc.js里面设置:module.exports={ plugins:{ ····, 'postcs...
1、不用px2rem-loader和lib-flexible搭配,而是使用:lib-flexible和postcss-pxtorem搭配,因为lib-flexible和postcss-pxtorem里面有一个过滤功能,可以让我们过滤掉以van开头的样式:在引入的postcssrc.js里面设置:
module.exports={
plugins:{
····,
'postcss-pxtorem':{
rootValue:75,
propList:['*'],
selectorBlackList:['van']
}
}
}
2、如果上面的不想用的话,就用下面这个喽!但是前提,如果已经使用了第二个,就要把那个过滤的设置给注释或者删除,否则可能会影响。第三种办法就是使用判断条件,依然是在postcssrc.js里面修改:
const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
let remUnit;
// 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
//link https://github.com/youzan/vant/issues/1181
if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
remUnit = 37.5;
}else {
remUnit = 75;
}
return {
plugins: [
px2rem({ remUnit: remUnit}),
AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] })
]
};
};
更多推荐



所有评论(0)