VUE:postcss-px2rem-exclude的失效问题记录

之前做vue项目一直使用的px2rem-loader+lib-flexible进行各种客户端的适配。

最近因为要使用第三方的UI库，发现引用后UI展示不正常，查找资料后知道要排除UI库的自动适配。

于是根据网上的资料改为postcss-px2rem-exclude去适配。

但是一顿操作后，连原来的适配都失效了，下面是查找到的使用方法

一、安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

二、配置 postcss-px2rem-exclude

在项目的根目录下找到文件.postcssrc.js，在里面添加如下代码

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px2rem-exclude": {  // 添加的代码
      remUnit: 75,
      exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
    }
  }
}

重新运行后发现所有的px转rem都失效了，然后又是一顿查找资料，又意外发现postcss-px2rem的配置代码是这样的

module.exports={
　　plugins:{
　　　　'postcss-pxtorem':{
　　　　　　rootValue:75, 　　　　　　
　　　　　　propList:['*']
　　　　}
　　}
}

我就想难道是这个参数不对？于是我把配置改成了

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    'postcss-px2rem-exclude': {
      rootValue: 75,
      propList: ['*'],
      exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
    }
  }
}

重新运行后居然就可以了！！！

自己的style都转换正常,node_modules目录下的文件都排除掉了。

但是我也不知道原理是啥，我看插件里的demo也是用的remUnit，但至少现在可以用了，所以先把问题记录下。