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?

Quass

Answer 1

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

Oily

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