mini-css-extract-plugin Conflicting order 警告解决

最新推荐文章于 2025-12-06 00:21:00 发布

原创最新推荐文章于 2025-12-06 00:21:00 发布 · 3.8w 阅读

1 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

7 篇文章

订阅专栏

本文详细解析了Webpack中mini-css-extract-plugin导致的CSS顺序冲突问题。通过调整JS中CSS的引入顺序，确保了一致性，消除了警告，稳定了构建过程。

今天在开发的时候，webpack提示了一个错误，mini-css-extract-plugin Conflicting order ，具体详细是提示了common.scss 和pmodal.scss两个的顺序冲突。

网上查了下，有的说是要重新安装一下mini-css-extract-plugin 升级一下版本就能解决问题。我试了下这个方法，问题没有解决。

我继续查，最后追踪到了github的下面这个issue

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250

一个官方维护人员的回复如下，简单的说，就是在js里css的引入顺序导致的问题，多个css的在js里的引入顺序不同，就会提示这个警告。例如，在1.js 里，引入的顺序是a.css, b.css; 在2.js里，引入顺序是b.css,a.css, 出现了这种引入顺序不同，就导致了警告。在两个js里把引入顺序调成一致，就没问题了。在1.js和2.js里的引入顺序都调整成a.css, b.css 就没有那个警告了。

sokra commented on 23 Aug

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

So not defining a clear order can lead to fragile builds, that's why we display a warning here.

There are two things that you can do:

Sort your imports to create a consistent order. I must admit that the warning could be improved to point to the locations that need to be changed.

Ignore the warning with stats.warningFilter when the order of these styles doesn't matter. Maybe the eventually add an option to mark order-independent styles directly.