【Webpack】使用 mini-css-extract-plugin 打包的时候发现的 warning

[makejun168]

webpack-contrib/mini-css-extract-plugin#250

[makejun168]

我们正在尝试生成一个CSS文件，但您的代码库对这些模块有多种可能的排序。

在这种情况下，您table之前button在一个位置使用过，button之前table在另一个位置使用过 我们需要为这些生成单个CSS文件，并且无法确定哪个应该是第一个。在这种情况下，我们放在table前面button。但这是毫无理由选择的。在未来的构建中，我们可以决定另一种方式。但是，由于CSS关注规则顺序，因此当CSS无缘无故地改变时，这可能会导致问题。

因此，不定义明确的订单会导致脆弱的构建，这就是我们在此处显示警告的原因。

你可以做两件事：

对导入进行排序以创建一致的订单。我必须承认可以改进警告以指向需要更改的位置。

stats.warningFilter当这些样式的顺序无关紧要时，忽略警告。也许最终会添加一个选项来直接标记与顺序无关的样式。
so we can ignore this warning? or we can modify vue.config.js to clean out warning?

[steveswork]

@makejun168 please take a look at this NPM package named @webkrafters/ordercss which now works to tackle this issue.

Full disclosure: I initially created it to solve this very problem in one of my apps but decided to expand it and share it with everyone.

If this package helps you, please share it with others.

Thanks and good luck!