如何在盖茨比中配置迷你css解压缩插件？

Question

问题所在

当我在盖茨比( 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

解药

我读过这里和这里，当使用一些CSS作用域机制时，可以忽略这些警告，这通常是唯一的解决方案。

当我使用CSS时，我决定将这个ignoreOrder: true选项传递给mini-css-extract-plugin，就像这是文件中描述的那样。

问题是

但我不知道如何在盖茨比( Gatsby )中为mini-css-extract-plugin定制Webpack配置，因为Gatsby没有一个专用的Webpack配置文件。

盖茨比文件有一篇关于如何定制Webpack配置的文章。我读过它，但仍然无法按我的意愿将配置选项传递给mini-css-extract-plugin。

Answer 1

正如您在盖茨比文件中看到的，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'查找plugin.constructor.name === 'MiniCssExtractPlugin'，并将ignoreOrder选项设置为true。之后，你用actions.replaceWebpackConfig(config)代替webpack的默认阶段actions.replaceWebpackConfig(config)。

因为stage === 'build-javascript'只影响构建阶段，但您可以简单地删除它以允许配置在各个阶段和模式(开发和构建)之间产生影响。

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