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'], // 属性选择器，*表示通用，!font-size表示禁用字体转换
            exclude: /(node_module)/,  // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法
            selectorBlackList: ['.radius'], //要忽略并保留为px的选择器
            // mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
          })
        ]
      }
    }
  }
}

3. 分析

通过上两篇文章的总结，发现上述autoprefixer和postcss-pxtorm与文章中的配置完全一致。
为什么autoprefixer自动添加css前缀会无效呢？？

反复修改、测试之后，揣摩出了其中的原因：
3.1. 按照上述1. autoprefixer的配置、2. postcss-pxtorm的配置，单独配置，各自都可以生效。但是一起使用后，autoprefixer无效。
3.2. 经测试发现，将代码都配置到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. 总结

4.1. 如果单独仅使用autoprefixer或postcss-pxtorem插件，可以按照以下两篇文章，进行配置
4.2. 如果这两个插件都要使用，可以将代码都配置到postcss.config.js

结合以下两篇文章做参考，效果会更佳。
autoprefixer总结：autoprefixer，自动补全css浏览器前缀
postcss-pxtorm总结：postcss-pxtorm，将像素单位生成rem单位

看都看到这了，留下三连吧   ——点赞、收藏、留言。