如何在 Gatsby 中配置 mini-css-extract-plugin？

Question

问题

当我运行 npm run build 在我的 Gatsby 项目中时，我收到多个相同类型的警告：

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

治愈

我读过 here and here 可以忽略这些警告，当使用一些 CSS 范围机制时，这通常是摆脱它们的唯一解决方案。

因为我正在使用 CSS 模块，所以我决定将 ignoreOrder: true 选项传递给 mini-css-extract-plugin，就像 it's documentation 中描述的那样。

问题

但我不知道该怎么做 - 为 mini-css-extract-plugin 自定义 Webpack 配置 - 在 Gatsby 中，它没有合适的专用 Webpack 配置文件。

Gatsby's documentation 有一篇文章如何自定义 Webpack 配置。我读了它，但仍然无法按我的意愿将配置选项传递给 mini-css-extract-plugin。

Answer 1

正如您在 gatsby-node.js 中的 Gatsby documentation 中看到的那样，Gatsby 公开了一些 API 来更改 webpack 的默认配置，其中之一 onCreateWebpackConfig 扩展并改变了此配置，允许您满足您的要求：

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

没有太多的谜团，代码是不言自明的。基本上你用 plugin.constructor.name === 'MiniCssExtractPlugin' 寻找 mini-css-extract-plugin 并将你的 ignoreOrder 选项设置为 true。之后，将 webpack 的默认阶段 action 替换为 actions.replaceWebpackConfig(config).

Answer 2

如果你想在开发和生产中都使用它，你必须再添加一个条件：


//gatsby-node.js

exports.onCreateWebpackConfig = helper => {
  const { stage, actions, getConfig } = helper
  if (stage === "develop" || 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)
  }
}

如何在 Gatsby 中配置 mini-css-extract-plugin？

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

webpack

gatsby

mini-css-extract-plugin

问题

治愈

问题