如何在Gatsby中配置mini-css-extract-plugin? [英] How do I configure mini-css-extract-plugin in Gatsby?

问题描述

问题

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

 警告块样式[mini-css-extract-plugin]顺序冲突.添加了以下模块:* CSS ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.js ?? ref--12-oneOf-0-3！./src/components/MineralsHeading/MineralsHeading.module.scss尽管无法使用这些模块完成所需的订购:* CSS ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.js ?? ref--12-oneOf-0-3！./src/components/Carousel/Carousel.module.scss警告块样式[mini-css-extract-plugin]顺序冲突.添加了以下模块:* CSS ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.js ?? ref--12-oneOf-0-3！./src/components/MineralsSubtitle/MineralsSubtitle.module.scss尽管无法使用这些模块完成所需的订购:* CSS ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.js ?? ref--12-oneOf-0-3！./src/components/Carousel/Carousel.module.scss警告块样式[mini-css-extract-plugin]顺序冲突.添加了以下模块:* CSS ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.js ?? ref--12-oneOf-0-3！./src/components/PageSection/PageSection.module.scss尽管无法使用这些模块完成所需的订购:* CSS ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.js ?? ref--12-oneOf-0-3！./src/components/Carousel/Carousel.module.scss 

治愈方法

我已经在此处和<在href ="https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings" rel ="nofollow noreferrer">此处中，当这些警告可以忽略时使用某些CSS范围界定机制，这通常是摆脱它们的唯一解决方案.

在使用CSS模块时，我决定将 ignoreOrder:true 选项传递给 mini-css-extract-plugin ，如它是文档.

问题

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

Gatsby的文档上有一篇文章如何自定义Webpack配置.我读了它，但仍然无法根据需要将配置选项传递给 mini-css-extract-plugin .

解决方案

您可以在 gatsby-node.js 中的> Gatsby文档 Gatsby公开了一些API来更改Webpack的默认配置，其中之一是 onCreateWebpackConfig ，用于扩展和更改此配置.满足您的要求:

让插件扩展/更改网站的Webpack配置.

另请参阅 setWebpackConfig 的文档.

  exports.onCreateWebpackConfig =({阶段，操作，getConfig})=>{if(stage ==='build-javascript'){const config = getConfig()const miniCssExtractPlugin = config.plugins.find(插件=>plugin.constructor.name ==='MiniCssExtractPlugin')如果(miniCssExtractPlugin){miniCssExtractPlugin.options.ignoreOrder = true}actions.replaceWebpackConfig(config)}} 

没有太多麻烦，代码是不言自明的.基本上，您会使用 plugin.constructor.name ==='MiniCssExtractPlugin'查找 mini-css-extract-plugin 并将您的 ignoreOrder 选项设置为 true .然后，将Webpack的默认阶段 action 替换为 actions.replaceWebpackConfig(config).

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.

解决方案

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

这篇关于如何在Gatsby中配置mini-css-extract-plugin?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！