Gatsby中mini-css-extract-plugin设置ignoreOrder不生效如何解决？

问题原因 #

你的配置未生效的核心原因有两个：

• 仅对线上构建的build-javascript阶段做了参数修改，本地开发对应的develop阶段没有覆盖，所以开发环境下警告依旧会触发
• 修改配置后未清理Gatsby本地缓存，旧缓存会导致新配置不生效

修复步骤 #

1. 将gatsby-node.js中的对应逻辑替换为如下代码：

const path = require('path')

module.exports.onCreateWebpackConfig = ({
    stage,
    actions,
    getConfig
}) => {
    actions.setWebpackConfig({
        resolve: {
            modules: ['node_modules', path.resolve(__dirname, 'src')],
            alias: {
                'basic-info': path.resolve(__dirname, 'src/app/routes/basic-info'),
                'situation-analysis': path.resolve(__dirname, 'src/app/routes/situation-analysis'),
                'select-drivers': path.resolve(__dirname, 'src/app/routes/select-drivers'),
                'define-vision': path.resolve(__dirname, 'src/app/routes/define-vision'),
                'rate-drivers': path.resolve(__dirname, 'src/app/routes/rate-drivers'),
                'affinity-groups': path.resolve(__dirname, 'src/app/routes/affinity-groups'),
                'define-objectives': path.resolve(__dirname, 'src/app/routes/define-objectives'),
                'create-roadmap': path.resolve(__dirname, 'src/app/routes/create-roadmap')
            }
        },
        devtool: 'eval-source-map'
    })

    // 覆盖所有使用mini-css-extract-plugin的阶段
    if (stage === 'build-javascript' || stage === 'develop') {
        const config = getConfig()
        const miniCssExtractPlugin = config.plugins.find(
            plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
        )
        if (miniCssExtractPlugin) {
            miniCssExtractPlugin.options.ignoreOrder = true
        }
        actions.replaceWebpackConfig(config)
    }
}

2. 执行命令清理Gatsby本地缓存：
   gatsby clean
3. 重启开发服务或重新执行构建操作即可生效，冲突警告会被完全屏蔽。

内容的提问来源于stack exchange，提问作者ElohmroW