解决vant-ui变小的问题
我们公司有个项目,使用的是rem布局+elmentui 。由于需要动很多页面,想快捷开发,于是vantUI,but 事与愿违,使用vant中的组件时发现字体和样式都很小。于是要解决啊,百度良久,终于结合百度上的答案和项目中的实际情况解决了问题。记录一下解决问题的过程
注意首先查找项目中package.json中引入的什么rem插件
首先要看一下项目中引入的是什么rem插件,因为vant的官方是有推荐使用的rem的。很不幸 公司的项目引入的是px2rem-loader。走了很多坑,想着px2rem-loader怎么兼容vant,然后。。。。。失败了。那就暴力一点跟着vant官方走喽。卸载px2rem-loader。可以在package.json中直接删除,也可以使用命令
npm uninstall px2rem-loader
使用postcss-pxtorem
npm install postcss-pxtorem
别忘记更新哦
npm install
有可能会报错,大概率是rem的版本太高了,跟当前的环境不匹配,所以降低一下rem版本
npm install postcss-pxtorem@5.1.1
再次更新运行项目,发现vant组件仍然很小,那是因为vant使用的是px的布局,所以在这个项目中需要把vant的组件过滤一下,不实用rem布局。在.postcssrc.js中添加过滤
'postcss-pxtorem':{
rootValue:72,
propList:['*'],
selectorBlackList:['van']
}
最后别忘记去掉utils.js中关于px2remLoader的rem适配哦。到此适配结束、
可能出现的问题:
1、一系列操作做完发现问题仍然存在
清除node_modules、清除cache
rm -rf node_modules
rm package-lock.json
npm cache clear --force
2、MAC 系统没有问题,但是Windows系统运行报错
检查一下package.json中插件引入的顺序,有可能是顺序导致的
最后祝大家,工作开心哦~~