mini-css-extract-plugin块中的警告chunkName [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

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

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

这个插件是什么？

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

为什么会发生在我身上？

您正在遇到它，因为所有这些条件都适用于您：

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

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

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

第 1 部分）订单

这个插件试图运行一个拓扑排序算法（源代码的这一部分）来找出它应该以什么顺序把 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>元素应用狂野规则的愚蠢示例不同，您实际上可能有某种范围的 CSS或 CSS 命名约定（如 BEM）可以防止此类事情成为问题。但是，这个插件并没有真正解析和理解 CSS 的内容。它只是抱怨“嘿，伙计！我不知道是a应该早点来b，还是b应该早点来a！ ”

解决方案

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

解决方案 1：修复它

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

无论如何，如果您有时间，这种方法是您可以尝试的最佳方法。

笔记：

• 您还可以导入PageS在PageR（或周围的其他方法，等等）明确地告诉插件来挑这个秩序，停止唠叨！这可能比遍历包含一个或另一个的所有地方并上下移动线条更容易。
• 重要说明 1：如果您认为按字母顺序排列导入行会有所帮助，请参阅此示例和 此注释（即使是 Visual Code 插件也无济于事）！
• 重要说明 2：订单冲突不一定在同一个文件中。它可以位于两个或多个文件的祖先中的任何位置！因此，找出答案可能会非常痛苦。
• 重要说明 3：它不会是面向未来的！因此，即使您上下移动了一些导入行，明天它也可能发生在您团队中的另一个开发人员身上。

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

解决方案2：杀死它

如果它实际上并未在生产和最终输出中引起问题，则可以通过将ignoreOrder标志传递给 Webpack 配置中插件的选项对象来抑制此错误。

笔记：

• 如果您在 WebPack 之上使用第三方构建包装器（就像我使用的Quasar一样），您可以使用webpack 链修改参数技术将此标志提供给现有配置。

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

Answer 2

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

new MiniCssExtractPlugin({
  ignoreOrder: true,
}),

Answer 3

CSS关心规则顺序。

问：警告是什么意思？

答：打包CSS模块时会有一些顺序冲突。

问：原因是什么？

答：插件（mini-css-extract-plugin）尝试生成CSS文件，但是您的代码库对模块有多种可能的排序。从你显示警告，看来你已经使用Icon之前Counter在一个位置和Counter之前Icon在其他位置。插件需要为此生成一个CSS文件，并且无法决定哪个模块的CSS应该放在第一位。CSS关心规则顺序，因此当CSS无故更改时可能会导致问题。因此，未定义明确的顺序可能会导致构建易碎，这就是为什么它在此处显示警告的原因。

问：如何解决？

答：对您的进口货进行排序以创建一致的订单。如果您不想麻烦自己，可以在这些样式的顺序无关紧要时忽略stats.warningFilter（如Czilla给出的答案所示）的警告。

Answer 4

请参阅Github 上报告的问题。

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