Vue PostCss插件——autoprefixer配置完成後無效，已解決

在使用autoprefixer時，先前的配置能成功添加css瀏覽器前綴，但結合postcss-pxtorem插件後，px可以轉換爲rem，但css前綴無效。

經過幾個小時的鼓搗，終於讓我發現了蛛絲馬跡。哈哈哈，好開心，好激動！！
一起來看一看博主陷入的困境吧。

1. autoprefixer的配置

根目錄postcss.config.js文件中，配置代碼如下：

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
        //'last 2 versions', // 所有主流瀏覽器最近2個版本
      ],
      grid: true
    }
  }
}

2. postcss-pxtorm的配置

根目錄vue.config.js文件中，配置代碼如下：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px單位換算成rem單位
            rootValue: 100, //換算基數， 默認100  ，這樣的話把根標籤的字體規定爲1rem爲50px,這樣就可以從設計稿上量出多少個px直接在代碼中寫多上px了。
            unitPrecision: 5, //允許REM單位增長到的十進制數字,小數點後保留的位數。
            propList: ['*', '!font-size'],
            exclude: /(node_module)/,  //默認false，可以（reg）利用正則表達式排除某些文件夾的方法
            selectorBlackList: ['.radius'], //要忽略並保留爲px的選擇器
            // mediaQuery: false,  //（布爾值）允許在媒體查詢中轉換px。
            minPixelValue: 5 //設置要替換的最小像素值(3px會被轉rem)。 默認 0
          })
        ]
      }
    }
  }
}

3. 分析

通過上兩篇文章的總結，發現上述autoprefixer和postcss-pxtorm與文章中的配置完全一致。
爲什麼autoprefixer自動添加css前綴會無效呢？？

反覆修改、測試之後，揣摩出了其中的原因：
A. 按照上述1. autoprefixer的配置、2. postcss-pxtorm的配置，單獨配置，各自都可以生效。但是一起使用後，autoprefixer無效。
B. 經測試發現，將代碼都配置到postcss.config.js，各自都可以正常使用。
具體代碼如下：

module.exports = {
  plugins: {
    "postcss-pxtorem": { // 把px單位換算成rem單位
      rootValue: 100, //換算基數， 默認100  ，這樣的話把根標籤的字體規定爲1rem爲50px,這樣就可以從設計稿上量出多少個px直接在代碼中寫多上px了。
      unitPrecision: 5, //允許REM單位增長到的十進制數字,小數點後保留的位數。
      propList: ['*', '!font-size'],
      exclude: /(node_module)/,  //默認false，可以（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)/ 。如果想把前端UI框架內的px也轉換成rem，請把此屬性設爲默認值
      selectorBlackList: ['.radius'], //要忽略並保留爲px的選擇器
      // mediaQuery: false,  //（布爾值）允許在媒體查詢中轉換px。
      minPixelValue: 5 //設置要替換的最小像素值(3px會被轉rem)。 默認 0
    },
    'autoprefixer': {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
        //'last 2 versions', // 所有主流瀏覽器最近2個版本
      ],
      grid: true
    }
  }
}

4. 總結

A. 如果單獨僅使用autoprefixer或postcss-pxtorem插件，可以按照以下兩篇文章，進行配置
B. 如果這兩個插件都要使用，可以將代碼都配置到postcss.config.js

結合以下兩篇文章做參考，效果會更佳。
autoprefixer總結：autoprefixer，自動補全css瀏覽器前綴
postcss-pxtorm總結：postcss-pxtorm，將像素單位生成rem單位

看都看到這了，來個炫酷三連擊   ——點贊、收藏、留言。