How to set the configuration of mini-css-extract-plugin in vue.config.js generated by vue-cli

Question

I have a fairly large Vue project that was initially created with vue-cli. I'm getting the infamous "couldn't fulfill desired order of chunk group(s)" warning when building. After much searching, I think the solution is to add ignoreOrder to the initial configuration options for mini-css-extract-plugin but I have no idea how. I think this should be done in vue.config.js. The contents of that file are:

module.exports = {
  lintOnSave: false
}

I've tried:

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({ ignoreOrder: true })
    ]
  }
}

But that gives me an error that I think means that the module was loaded twice.

I've tried:

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      ignoreOrder: true
    }
  }
}

but that gives me a syntax error.

How do I set that option?

tmhao2005 · Accepted Answer · 2021-04-16 08:27:11Z

5

According to the document, you can pass the configuration for min-css-extract-plugin by passing the options via css.extract property as following:

// vue.config.js
module.exports = {
  // ...,
  css: {
    extract: {
      ignoreOrder: true
    },
  }
};

answered Apr 16, 2021 at 8:27

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paulie Over a year ago

Thank you, thank you, thank you, thank you! I was looking at that page but didn't associate the keyword "extract" with that plugin.

Collectives™ on Stack Overflow

How to set the configuration of mini-css-extract-plugin in vue.config.js generated by vue-cli

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related