警告在块AccessRights〜Groups〜Navigator中[mini-css-extract-plugin] 之间的顺序冲突：
这是什么意思，以及如何解决？预先谢谢您！
"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",
答案 0 :(得分：10)
它很容易变成一个烦人的错误！我可以看到它在每个框架中都有报告——例如在 issue #5372 in create-react-app、issue #250 in the mini-css-extract-plugin 本身等中。
我花了 6 个小时调试它（包括将 console.log 放入 mini-css-extract-plugin where it omits the Warning 的源代码中），以下是我的发现。
webpack 的 mini-css-extract-plugin 是一个 CSS-bundler。它可以收集 CSS 片段并将它们放入 .css 块中。就像整个 Webpack 构建对 .js 文件所做的一样。
您遇到这种情况是因为所有这些条件都适用于您：
这是“订单”+“冲突”。让我们回顾一下。
此插件正在尝试运行 topological sorting 算法 (this part of the source code) 以找出应将 CSS 规则放在其输出包中的顺序，以免引起任何问题。< /p>
问题是，与 JavaScript 不同的是，您清楚地 export 从文件/模块中// module a.js
<div>hi, I am A!</div>
// ... in CSS section of the same file:
div { color: red; }
您的对象（无顺序，因为它们被命名），在 CSS 中它只会被附加（就像一个字符串数组）和所以导入的顺序实际上很重要！
假设您有两个模块：
// 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"
然后你就有了一个包含它们的页面。
div { color: red; }
div { color: blue; }
到目前为止，一切都很好！ CSS 输出可以是
<div>这意味着所有 // page R (for Reverse)
import b from "b.js"
import a from "a.js"
都应该具有蓝色字体颜色。
然而，如果我们有一个页面以相反的顺序导入它们，而不是那个页面 S，那就是：
div { color: blue; }
div { color: red; }
并且输出将等于
<div>这意味着所有 <div> 都应该具有红色字体颜色。
这就是导入顺序很重要的原因。
现在，如果您同时拥有页面 S 和页面 R，那么输出 CSS 应该是什么？
请注意，与对所有 a 元素应用通配规则的愚蠢示例不同，您实际上可能有某种 scoped CSS 或 CSS 命名约定 like BEM防止这样的事情成为问题。但是，这个插件并没有真正解析和理解 CSS 的内容。它只是抱怨“嘿伙计！我不知道 b 应该在 b 之前，还是 a 应该在 , , , , , , 之前！ "
您基本上有两个解决方案，就像任何其他问题一样！要么解决它，要么解决它。
错误信息很难阅读，有时甚至不输出模块的正确细节。 （对我来说它就像 .name 因为某种原因我的 ChunkGroups 没有 PageS 属性；所以信息为零。）如果你有超过 20 个文件，它可能会非常混乱。
无论如何，如果您有时间，this approach 是您可以尝试的最佳选择。
PageR 中导入 {{1}}（或其他方式，无论如何）以明确告诉插件选择此顺序并停止唠叨！这可能比遍历包含一个或另一个的所有地方并上下移动线条更容易。所以，TL;DR，如果您发现自己在这方面花费了两个多小时，请尝试下面的解决方案 #2。
如果它实际上并未在生产和最终输出中导致问题，您可以通过将 ignoreOrder flag 传递给 Webpack 配置中插件的选项对象来抑制此错误。
这是一个很好的最后手段！祝你好运。 :)
答案 1 :(得分：3)
mini-css-extract-plugin version 0.8.0包含一个新选项test = df['outcome']。您可以检查https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings
ignoreOrder答案 2 :(得分：2)
现在有一个名为 @webkrafters/ordercss 的 NPM 包可以从根本上解决这个问题。
完全披露：我最初创建它是为了在我的一个应用中解决这个问题，但决定扩展它并与所有人分享。
如果此包对任何人有帮助，请与他人分享。
谢谢，祝你好运！
注意： 设置 MiniCssExtractPlugin ignoreOrder 属性会抑制警告，但可能无法解决根本问题，尤其是对于那些使用模块化 css 的人。这可能会导致渲染视图的不可预测性。
答案 3 :(得分：0)
CSS照顾规则顺序。
问：警告是什么意思？
A：打包CSS模块时会有一些顺序冲突。
问：是什么原因？
A：插件（mini-css-extract-plugin）尝试生成CSS文件，但是您的代码库对模块有多种可能的排序。根据显示的警告，您似乎在一个位置的Icon之前使用了Counter，在另一位置的Counter之前使用了Icon。插件需要为此生成一个CSS文件，并且无法决定哪个模块的CSS应该放在第一位。 CSS关心规则顺序，因此当CSS无故更改时可能会导致问题。
因此，未定义明确的顺序可能会导致构建易碎，这就是为什么它在此处显示警告的原因。
问：如何解决？
A：对进口商品进行排序以创建一致的订单。如果您不想麻烦自己，可以在这些样式的顺序无关紧要时忽略stats.warningFilter（如Czilla给出的答案所示）的警告。
答案 4 :(得分：-1)
const webpackConfig = {
stats: {
// warn => /Conflicting order between:/gm.test(warn)
warningsFilter: warn => warn.indexOf('Conflicting order between:') > -1 // if true will ignore
}
}