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

【问题标题】：How do I configure mini-css-extract-plugin in Gatsby?如何在 Gatsby 中配置 mini-css-extract-plugin？
【发布时间】：2020-11-17 07:43:31
【问题描述】：

问题

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

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 和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。

【问题讨论】：

标签： webpack gatsby mini-css-extract-plugin

【解决方案1】：

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

让插件扩展/改变网站的 webpack 配置。

另请参阅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)。

【讨论】：

工作就像一个魅力。谢谢。
但这只是关闭此问题的解决方案吗？我认为这背后有某种形式的意图。这里有什么问题为什么会弹出这个警告？编辑：我发现另一个提示相同但解释得更好的条目：spectrum.chat/gatsby-js/general/…
这不是一个“问题”是一个 webpack 警告。在捆绑过程中，webpack 获取所有需要的资产。如果您使用纯 CSS，则类名在文件中是全局的，它们的顺序导入很重要，并且当它们应用于某个元素（不是正确的样式）时，可能会导致类型定义中的一些问题。如果您使用的是 CSS 模块，则每个类名都通过前缀限定为文件。在这种情况下，顺序无关紧要。无论如何，您的样式都将正确应用，因为它们已被转译，但由于固有的行为，webpack 仍然为此烦恼
当然，理想情况下，警告应该被修复，但在 90% 的情况下，警告应用于node_modules 中的第三方依赖项，而不是项目文件本身。如果您不使用该文件，则可以通过将ignoreOrder 设置为true（问题的情况）来忽略它们

【解决方案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)
  }
}

【讨论】：