vue-cli3.0用lib-flexible、postcss-px2rem-exclude实现移动端适配,解决第三方ui库样式变小问题,如:vant

第一部分:项目中引入lib-flexible

一、项目中安装lib-flexible

npm install lib-flexible 

二、在项目的入口main.js文件中引入lib-flexible

import 'lib-flexible'

第二部分:使用postcss-px2rem-exclude自动将css中的px转换成rem

一、安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

二、配置 postcss-px2rem-exclude,在postcss.config.js文件中

module.exports = {
    plugins: {
        autoprefixer: {
        },
        "postcss-px2rem-exclude": {
            remUnit: 75,
            exclude: /node_modules|folder_name/i   // 忽略node_modules目录下的文件
        }
    },
}

重新启动,就OK了。

吐槽:在网上找了很多都试过了就是不好使,之后看到其中一篇中,将配置 postcss-px2rem-exclude配置中 exclude路径中的引号去掉就好使了

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值