32

块 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",
4

5 回答 5

31

它很容易成为一个烦人的错误！我可以看到它在每个框架中都有报告——例如在create-react-app 中的 issue #5372 中，在 mini-css-extract-plugin本身中的 issue #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 配置中插件的选项对象来抑制此错误。

笔记：

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

于 2021-05-18T02:52:49.867 回答
26

CSS 关心规则顺序。

问：警告是什么意思？

A: 打包 CSS 模块时存在一些顺序冲突。

问：是什么原因？

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

问：如何修复？

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

于 2019-05-22T11:59:55.207 回答
11

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

new MiniCssExtractPlugin({
  ignoreOrder: true,
}),
于 2019-10-22T07:02:16.543 回答
4

请参阅Github 上报告的问题。

 const webpackConfig = {
   stats: {
                  // warn => /Conflicting order between:/gm.test(warn)
     warningsFilter: warn => warn.indexOf('Conflicting order between:') > -1 // if true will ignore
   }
 }
于 2019-01-23T07:01:36.103 回答
2

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

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

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

谢谢，祝你好运！

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

于 2020-12-22T20:46:24.917 回答