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

CSS cares for rule order.

问:警告是什么意思？

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

问:原因是什么？

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

问:如何解决？

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