CODEWITHSUNDEEP
webpackvue.jspostcssautoprefixervue-cli
Tomer
Tomer

Reputation: 17940

Autoprefixer not adding grid prefixes for IE

I'm using vue-cli version 3.x.

I've added a vue.config.js file:

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

But although I've set grid:true in the options, the grid attributes are not prefixed.

What am i missing?

Upvotes: 1

Views: 1381

Answers (1)

Tomer
Tomer

Reputation: 17940

Finally got it, The rule i extended is the rule for external scss files, but it does not apply to styles in .vue files.

So i needed to update the vue-loader configuration and add autoprefixer there:

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

Upvotes: 1

Related Questions