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配置并在那里添加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]
      }
    };
  }
};

Autoprefixer不为IE添加网格前缀

1 个答案: