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，但至少現在可以用了，所以先把問題記錄下。