#每天一个知识点# 打卡第十九天[紫薇别走][紫薇别走]Error: chunk common [mini-css-extract-plugin] Conflicting order. Following module has been added: * css ./node_modules/.pnpm/registry.npmmirror.com+css-loader@6.8.1_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/.pnpm/registry.npmmirror.com+postcss-loader@7.3.3_postcss@8.4.18_webpack@5.78.0/node_modules/pos......
这个错误是由 mini-css-extract-plugin 抛出的，并与 Webpack 构建时样式的顺序有关。具体来说，它警告你存在冲突的 CSS 导入顺序，这可能会导致生产环境中的样式不如你预期。
为什么这是个问题？考虑这样一个场景：你在文件 A 中导入了一个样式文件1，并在文件 B 中导入了样式文件2。在开发环境中，你可能首先加载了文件 A，然后加载了文件 B，导致文件2中的样式覆盖了文件1中的样式。但在生产环境中，这两个文件的加载顺序可能会发生变化，导致样式的应用效果与你在开发环境中看到的不一致。
为了解决这个问题，你可以：
检查导入顺序：确保你的样式文件在项目中的导入顺序是一致的。避免在一个模块中首先导入样式 A，然后在另一个模块中首先导入样式 B。
使用 CSS Modules：CSS Modules 可以确保类名的局部范围，从而减少因全局样式冲突导致的问题。
禁用此检查：尽管这不是推荐的做法，但如果你确定导入顺序不会导致问题，你可以在 Webpack 配置中设置 mini-css-extract-plugin 的 ignoreOrder 选项为 true 来禁用此检查。
展开
青训营-快乐出发
avatar
赞过
评论
相关推荐