vue-cli3.x 移动端适配(使用postcss-px2rem 忽略指定文件 不影响ui组件样式的解决方案)——亲测有效!!!
在网上找了好久,提供的教程都不太实用。因为3.x 把配置文件集成至 package.json 中,所以我们的配置信息需要在package.json进行配置。就这一点,我都找了好久。(我太菜了o(╥﹏╥)o)cd 当前文件夹npm install lib-flexible --savenpm install postcss-pxtorem --save在 package.json 结尾 中添加 如下
·
在网上找了好久,提供的教程都不太实用。因为3.x 把配置文件集成至 package.json 中,所以我们的配置信息需要在package.json进行配置。
就这一点,我都找了好久。(我太菜了o(╥﹏╥)o)
cd 当前文件夹
npm install lib-flexible --save
npm install postcss-pxtorem --save
在 package.json 结尾 中添加 如下代码
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75,
"propList" : ["*"],
}
}
}
在main.js 中引入 import 'lib-flexible'
——————————分割线——————————
2020年8月26号补充说明:
项目后续,遇到了UI组件样式受影响的问题。然后在网上找了很久,感觉都说的不是特别对。
我分享一下我解决的过程。亲测有效!!!
第一步:(来源于网络)
postcss-px2rem不能忽略指定文件
需要安装postcss-px2rem-exclude(安装前需要先卸载postcss-px2rem)
npm uninstall postcss-px2rem --save-dev
npm install postcss-px2rem-exclude --save
第二步:(这一步比较关键)
本来是要在package.json中设置这个忽略路径的,但是去掉引号会报错。没办法,只能采取在根目录下新建一个postcss.config.js。
这样就可以啦~~~
更多推荐
已为社区贡献2条内容
所有评论(0)