vuecli中使用splitchunksplugin提取公共组件，vue单组件使用less scoped处理style，打包会有css顺序冲突警告

# 冲突的发生：
· 假设你的项目有两个页面：PageA.vue 和 PageB.vue，它们都引用了同一个公共组件 CompC.vue。
· Webpack 会为 PageA 和 PageB 生成两个独立的 CSS 文件：page-a.[hash].css 和 page-b.[hash].css。
· 同时，由于 splitChunks 的配置，CompC 的样式会被提取到第三个公共 CSS 文件中，比如 chunk-common.[hash].css。
· 现在，当浏览器加载页面时：
· 加载 chunk-common.css（包含 CompC 的样式）。
· 然后加载当前页面的 CSS，例如 page-a.css（包含 PageA 的 Scoped 样式）。
· 问题来了：CompC 的样式先被定义，PageA 中可能修改 CompC 样式的 Scoped 规则后被定义。这符合预期，后定义的 PageA 样式会覆盖 CompC 的。
· 但是，Webpack 的代码分割和动态加载机制可能导致在不同的页面或不同的加载时机下，多个 CSS 文件的加载顺序并不总是稳定的。例如，可能先加载了 page-b.css，再加载 chunk-common.css。这时，CompC 的样式后定义，它会覆盖掉 page-b.css 中本该覆盖它的样式，导致页面 PageB 的样式表现错误。

Webpack 监测到了这种同一 CSS 规则在不同 chunk 中被定义且顺序不稳定的情况，因此抛出 Conflicting order 警告。

 # 处理

1. 优化你的 splitChunks 配置，避免将 Vue 组件的 CSS 过度拆分到多个 chunk 中。核心思想是 让公共组件的样式稳定地存在于一个公共 chunk 中。

但实际上会影响按需加载，我感觉并不好。而且指定输出唯一文件会报错的，它也会报冲突，不知道是不是我的配置问题。

2. 可以使用 深度作用选择器 (::v-deep 或 /deep/) 来提升选择器的优先级，这样即使加载顺序不对，由于你的选择器优先级更高，样式也会生效。

这个写的时候就需要处理，而且据说并不能消除警告。我没有试。

3. 不要公共组件库

感觉公共组件不多的情况下完全没必要啊，把大的静态文件分割出就行了。如果真的公共代码较多的话，可以考虑单独分包。这样样式处理逻辑会变更，深层样式要靠/deep/去更改保持能够正常响应（感觉这个才是正常处理逻辑）