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

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.

Solution

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).