vue移动端中使用lib-flexible和px2rem,再引入第三方UI库导致第三方UI库的样式也变小的问题

在移动端开发中,常常会用到rem相对单位来做自适应。最常用到一种方法就是使用lib-flexible和px2rem来做到自动转换px单位
但是,这个方法是有缺陷的,当引入第三方UI库时,会发现第三方的UI库的样式也自动转化成rem了。所以样式会变小。

npm install  px2rem-loader --save
npm install amfe-flexible --save

使用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

module.exports= {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
}

参考文章:https://www.jianshu.com/p/2614459192b0

你可能感兴趣的:(vue移动端中使用lib-flexible和px2rem,再引入第三方UI库导致第三方UI库的样式也变小的问题)