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

开篇

在移动端开发中，常常会用到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