块 chunkName [mini-css-extract-plugin] 中的 mini-css-extract-plugin 警告：

Question

块 AccessRights~Groups~Navigator [mini-css-extract-plugin] 中的警告 之间的顺序冲突：

• css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Icon/_circle/Icon_circle.scss
• css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Counter/Counter.scss
• css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/NavigatorToolbar/NavigatorToolbar.scss

这是什么意思以及如何解决？提前感谢您！

"assets-webpack-plugin": "3.9.5",
"autoprefixer": "9.1.0",
"css-loader": "1.0.0",
"file-loader": "1.1.11",
"image-webpack-loader": "4.3.1",
"mini-css-extract-plugin": "0.4.2",
"postcss-advanced-variables": "2.3.3",
"postcss-clearfix": "2.0.1",
"postcss-conditionals": "2.1.0",
"postcss-extend": "1.0.5",
"postcss-functions": "3.0.0",
"postcss-hexrgba": "1.0.1",
"postcss-import": "12.0.0",
"postcss-loader": "2.1.6",
"postcss-media-minmax": "3.0.0",
"postcss-nested": "3.0.0",
"postcss-sassy-mixins": "2.1.0",
"postcss-simple-vars": "4.1.0",
"postcss-size": "2.0.0",
"postcss-urlrewrite": "0.2.2",
"source-map-loader": "0.2.3",
"string-replace-loader": "2.1.1",
"style-loader": "0.22.0",
"url-loader": "1.0.1",
"webpack": "4.16.5",
"webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.5",    

Answer 1

它很容易成为一个恼人的错误！我可以看到它在每个框架中都被报告——例如在issue #5372 in create-react-app、issue #250 in the mini-css-extract-plugin 本身等中。

我花了 6 个小时调试它（包括将 console.log 放入 mini-css-extract-plugin where it omits 警告的源代码中），这是我的发现。

这是什么插件？

webpack 的 mini-css-extract-plugin 是一个 CSS-bundler。它可以收集 CSS 片段并将它们放入 .css 块中。就像整个 Webpack 构建对 .js 文件所做的那样。

为什么会发生在我身上？

您遇到这种情况是因为所有这些条件都适用于您：

1. 您有Vue SFC 或CSS-in-JS，这会导致您的CSS 内容位于不同的文件中（称为模块）。
2. 您的 webpack 配置被设置为进行某种代码拆分优化，（例如，通过split-chunks-plugin）将您的模块放入块中，以便在客户端延迟加载（例如，1000 个文件，分成 10 个块，即只有在用户需要时才由用户下载。）因此，这个插件会检查 webpack 如何捆绑您的模块并尝试从中创建自己的 CSS 包。
3. 您的导入中存在“订单冲突”！

现在什么是“订单冲突”？

这是“秩序”+“冲突”。让我们回顾一下。

第 1 部分）订单

此插件正在尝试运行topological sorting 算法 (this part of the source code) 以找出应该将 CSS 规则放在其输出包中的顺序，以免造成任何问题。

问题是，与 JavaScript 不同，您清楚地 export 来自文件/模块的对象（没有顺序，因为它们被命名），在 CSS 中它只会被附加（就像一个字符串数组），所以导入的顺序实际上很重要！

假设您有两个模块：

// module a.js
<div>hi, I am A!</div>
// ... in CSS section of the same file:
div { color: red; }

// module b.js
<div>hi, I am B!</div>
// ... in CSS section of the same file:
div { color: blue; }

然后你有一个包含它们的页面。

// page S (for Straight)
import a from "a.js"
import b from "b.js"

到目前为止，一切都很好！ CSS 输出可以是

div { color: red; }
div { color: blue; }

这意味着所有<div>s 都应该有蓝色字体颜色。

但是，如果我们有一个页面以相反的顺序导入它们而不是那个页面 S，它将是：

// page R (for Reverse)
import b from "b.js"
import a from "a.js"

输出等于

div { color: blue; }
div { color: red; }

这意味着所有<div>s 都应该有红色字体颜色。

这就是导入顺序很重要的原因。

第 2 部分）冲突

现在，如果您同时拥有页面 S 和页面 R，那么输出 CSS 应该是什么？

请注意，与在所有<div> 元素上应用通配规则的愚蠢示例不同，您实际上可能有某种scoped CSS 或CSS 命名约定like BEM 可以防止这样的事情成为问题。但是，这个插件并没有真正解析和理解 CSS 的内容。它只是抱怨“嘿，伙计！我不知道a应该在b之前，还是b应该在a之前！”

解决方案

你基本上有两个解决方案，就像任何其他问题一样！要么解决它，要么杀死它。

解决方案 1：修复它

错误消息很难阅读，有时甚至没有输出正确的模块详细信息。 （对我来说，就像, , , , , , 一样，由于某种原因，我的 ChunkGroups 没有 .name 属性；所以信息为零。）如果您有超过 20 个文件，它可能会非常混乱。

无论如何，如果你有时间this approach是你可以尝试的最好的。

注意事项：

• 您还可以在PageR 中导入PageS（或其他方式），以明确告诉插件选择此顺序并停止唠叨！这可能比遍历所有地方（包括一个或另一个）并上下移动线条更容易。
• 重要提示 1：如果您认为按字母顺序对导入行进行排序会有所帮助，请参阅 THIS EXAMPLE 和 THIS COMMENT (that even a Visual Code plugin cannot help)！
• 重要说明 2：订单冲突不一定在同一个文件中。 它可以在两个或多个文件的祖先中的任何位置！因此，发现可能会非常痛苦。
• 重要提示 3：它不会面向未来！因此，即使您上下移动了几条导入行，明天也可能会发生在您团队中的另一位开发人员身上。

所以，TL;DR，如果您发现自己在这方面花费了两个多小时，请尝试下面的解决方案 #2。

解决方案 2：杀死它

如果它实际上并没有导致生产和最终输出出现问题，则可以通过将 ignoreOrder flag 传递给 Webpack 配置中插件的选项对象来抑制此错误。

注意事项：

• 如果您在 WebPack 之上使用第三方构建包装器（例如我正在使用的 Quasar's），您可以使用 webpack chain modify arguments technique 将此标志提供给现有配置。

这是一个很好的最后手段！祝你好运。 :)

Answer 2

CSS 关心规则顺序。

问：警告是什么意思？

答：打包 CSS 模块时存在一些顺序冲突。

问：是什么原因？

A：插件 (mini-css-extract-plugin) 尝试生成 CSS 文件，但您的代码库有多个可能的模块排序。从您显示的警告来看，您似乎在一个位置使用了Icon 之前的Counter 并在另一个位置使用了Counter 之前的Icon。插件需要从这些生成单个 CSS 文件，并且无法决定应该首先放置哪个模块的 CSS。 CSS 关心规则顺序，因此当 CSS 无故更改时，这可能会导致问题。 因此，不定义明确的顺序可能会导致构建脆弱，这就是它在此处显示警告的原因。

问：如何解决？

答：对您的导入进行排序以创建一致的顺序。如果您由于某种原因无法排序，例如，您的项目中的库超出了您的控制范围，或者当这些样式的顺序无关紧要时，您可以通过按照其他答案中的建议进行更改来忽略警告。

Answer 3

mini-css-extract-plugin version 0.8.0 包含一个新选项 ignoreOrder。可以查看https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings

new MiniCssExtractPlugin({
  ignoreOrder: true,
}),

Answer 4

请参阅issue reported on Github。

 const webpackConfig = {
   stats: {
                  // warn => /Conflicting order between:/gm.test(warn)
     warningsFilter: warn => warn.indexOf('Conflicting order between:') > -1 // if true will ignore
   }
 }

Answer 5

现在有一个名为 @webkrafters/ordercss 的 NPM 包从根本上解决了这个问题。

完全披露：我最初创建它是为了在我的一个应用中解决这个问题，但后来决定扩展它并与大家分享。

如果这个包对任何人有帮助，请与他人分享。

谢谢，祝你好运！

注意： 设置 MiniCssExtractPlugin ignoreOrder 属性会抑制警告，但可能无法解决潜在问题，尤其是对于那些使用模块化 css 的人。这可能会导致渲染视图的不可预测性。