Autoprefixer 不为 IE 添加网格前缀答案

【问题标题】：Autoprefixer not adding grid prefixes for IEAutoprefixer 不为 IE 添加网格前缀
【发布时间】：2018-04-10 13:59:18
【问题描述】：

我正在使用 vue-cli 版本 3.x。

我已经添加了一个 vue.config.js 文件：

const autoprefixer = require("autoprefixer");
const plugin = autoprefixer({ grid: true });
module.exports = {
  configureWebpack: config => {
    //get the index of the scss rule
    let index = config.module.rules.findIndex(item => item.test.test("*.scss"));
    const rule = config.module.rules[index];
    //get the index of the postcss-loader config
    let postCssIdx = rule.use.findIndex(
      item => item.loader === "postcss-loader"
    );

    //add the autoprefixer plugin
    config.module.rules[index].use[postCssIdx].options = {
      ...rule.use[postCssIdx].options,
      plugins: [plugin]
    };
  }
};

但是虽然我在选项中设置了grid:true，但是网格属性没有前缀。

我错过了什么？

【问题讨论】：

什么是自动前缀版本；你指定一个自定义的browserlist 吗？
"autoprefixer": "^8.2.0" 我在 package.json 中定义了浏览器列表："browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]
目前有一个autoprefixer#954 问题与媒体查询中的网格前缀有关 - 这适用于您的用例吗？
很遗憾，我不使用媒体查询。我也使用 gulp 在不同的项目中运行它，它运行良好。我猜这是一个 vue-cli/webpack 问题

标签： webpack vue.js postcss autoprefixer vue-cli

【解决方案1】：

终于明白了，我扩展的规则是外部scss文件的规则，但不适用于.vue文件中的样式。

所以我需要更新 vue-loader 配置并在那里添加 autoprefixer：

const autoprefixer = require("autoprefixer");
const plugin = autoprefixer({ grid: true });
module.exports = {
  configureWebpack: config => {
    //1. Define autoprefixer for external scss
    //get the index of the scss rule
    let index = config.module.rules.findIndex(item => item.test.test("*.scss"));
    let rule = config.module.rules[index];
    //get the index of the postcss-loader config
    let postCssIdx = rule.use.findIndex(
      item => item.loader === "postcss-loader"
    );

    const postcssOptions = rule.use[postCssIdx].options;

    //add the autoprefixer plugin
    config.module.rules[index].use[postCssIdx].options = {
      ...postcssOptions,
      plugins: [plugin]
    };

    //2. Define autoprefixer for vue files
    index = config.module.rules.findIndex(item => item.test.test("*.vue"));
    rule = config.module.rules[index];
    rule.use[0].options = {
      ...rule.use[0].options,
      postcss: {
        plugins: [plugin]
      }
    };
  }
};

【讨论】：

那么这个放到什么文件里了？ webpack.config.js??
文件是vue.config.js