vue-cli3.x 移动端适配(使用postcss-px2rem 忽略指定文件 不影响ui组件样式的解决方案)——亲测有效!!!

在网上找了好久,提供的教程都不太实用。因为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。
在这里插入图片描述
这样就可以啦~~~

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值