How do I configure mini-css-extract-plugin in Gatsby?

Question

The problem

When I run npm run build in my Gatsby project, I'm getting multiple warnings of the same kind:

warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/MineralsHeading/MineralsHeading.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/Carousel/Carousel.module.scss
warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/MineralsSubtitle/MineralsSubtitle.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/Carousel/Carousel.module.scss
warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/PageSection/PageSection.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/Carousel/Carousel.module.scss

The cure

I've read here and here that those warnings can be ignored, when using some CSS scoping mechanisms and that's often the only solution to get rid of them.

As I'm using CSS Modules, I decided to pass that ignoreOrder: true option to mini-css-extract-plugin, like it's described in it's documentation.

The question

But I don't know how to do it - customize Webpack configuration for mini-css-extract-plugin - in Gatsby, which doesn't have a proper dedicated Webpack configuration file.

Gatsby's documentation has an article how to customize a Webpack configuration. I read it, but still wasn't able to pass the configuration option to mini-css-extract-plugin as I want.

Contango

Answer 1

As you can see in Gatsby documentation in your gatsby-node.js Gatsby exposes a few APIs to change webpack's default configuration, one of them, onCreateWebpackConfig, extends and mutates this configuration allowing you to fit your requirements:

Let plugins extend/mutate the site’s webpack configuration.

See also the documentation for setWebpackConfig.

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  if (stage === 'build-javascript') {
    const config = getConfig()
    const miniCssExtractPlugin = config.plugins.find(
      plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
    )
    if (miniCssExtractPlugin) {
      miniCssExtractPlugin.options.ignoreOrder = true
    }
    actions.replaceWebpackConfig(config)
  }
}

There's no much mistery, the code is self-explanatory. Basically you look for mini-css-extract-plugin with plugin.constructor.name === 'MiniCssExtractPlugin' and set your ignoreOrder option as true. Afterward, you replace webpack's default stage action with actions.replaceWebpackConfig(config).

Because stage === 'build-javascript' the snippet only affects in the building stage but you can simply remove it to allow the configuration affects among stages and modes (development and build).

Recall

Worked like a charm. Thanks. – Contango

But is just switching this off the solution for this problem? I think there is some form of intent behind this. What is the issue here why is this warning popping up?? Edit: I found another entry that suggest the same but explains it better: spectrum.chat/gatsby-js/general/… – Torrefy

It's not a "problem" is a webpack warning. In the bundling process, webpack fetches all the needed assets. If you are using plain CSS, the class names are global among files, their order importation matters and can cause some issues in types definitions when they are applied to a certain element (not in the proper styles). If you are using a CSS module each class name is scoped to a file by being prefixed. In that case, the order doesn't matter. Your styles will be applied correctly no matter what since they are transpiled but webpack still bothering about that because of the inherent behavior – Recall

Of course, ideally, the warnings should be fixed but in 90% of the cases, the warnings are applied to third-party dependencies in node_modules, not in the project files itself. If you are not using that files, you can ignore them by setting the ignoreOrder to true (the case of the question) – Recall