vue移动端中使用lib-flexible和px2rem,再引入
开篇
在移动端开发中,常常会用到rem相对单位来做自适应。最常用到一种方法就是使用lib-flexible和px2rem来做到自动转换px单位。具体方法参考上一篇文章(px2rem-loader(Vue:将px转化为rem,适配移动端))。
相对缺陷
但是,这个方法是有缺陷的,当引入第三方UI库时,会发现第三方的UI库的样式也自动转化成rem了。所以样式会变小。
解决方法:
其实解决方法很简单,让其不转化成rem就可以了。但是怎么做到呢,请往下看。
使用postcss-px2rem-exclude,网上好多说用这个方法不起作用,经过一个下午的折腾才发现是使用方法不对,我的错误方法就不跟你们说了,直接来正确的。
首先,需要卸载项目中的postcss-px2rem。
npm uninstall postcss-px2rem --save-dev
其次,安装postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
最后是配置exclude选项,需要注意的是这个配置在vue.config.js中式不起作用的,如图。
正确的配置位置是项目根目录下的postcss.config.js文件,如果你的项目没有生成这个独立文件,就需要在你的package.js里设置。
postcss.config.jsmodule.exports= {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
};
package.json
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude":{
"remUnit": 75,
"exclude":"/node_modules|floder_name/i"
}
}
},
最后别忘了把之前配置过的信息删掉。在build-utils.js下,如图:
ok,完成。
以上就是我这个项目的填坑经历,希望对你有用,能少走点弯路 o(*^@^*)o