Autoprefixer 不为 IE 添加网格前缀

Question

我使用的是 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，但网格属性没有前缀。

我错过了什么？

Answer 1

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

所以我需要更新 vue-loader 配置并在其中添加自动前缀：

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]
      }
    };
  }
};

Autoprefixer 不为 IE 添加网格前缀

Autoprefixer not adding grid prefixes for IE

webpack

vue.js

autoprefixer

postcss

vue-cli