如何解决SCSS代码分割后CSS重复加载的问题

SCSS本身不支持运行时代码分割，重复样式源于构建工具未配置CSS去重或滥用@use导致多入口重复引入；需通过splitChunks.cacheGroups（Webpack）或manualChunks（Vite）提取公共SCSS模块，并确保所有入口使用一致路径@use同一文件。

SCSS 本身不支持运行时代码分割，所谓“分割后重复加载”，根本原因是构建工具没配置好，或者 @use 被滥用——不是 Sass 编译错了，是你在多个入口里反复 @use "components/button"，导致样式被复制进每个 CSS 包。

为什么重复样式总出现在打包产物里

常见错误现象：多个页面的 CSS 文件里都包含一模一样的 .btn { background: #007bff; }，哪怕只在一个地方写了 @include button-styles。

1. @use 是编译期导入，它不合并、不 dedupe，只做命名空间隔离；重复 @use 就等于重复插入样式块
2. Webpack 默认不会对 CSS 做模块级去重，splitChunks 只按文件路径切分，不识别 SCSS 模块语义
3. Vite 的 cssCodeSplit: true 默认按入口拆，但若多个入口都 @use "shared/mixins"，这些 mixin 展开后的 CSS 仍会重复

真正起作用的配置项在哪

关键不是改 SCSS 写法，而是让构建工具识别“哪些样式该共用”。

1. Webpack：必须显式配置 splitChunks.cacheGroups，把公共 SCSS 模块提取到单独的 vendor.css 中，例如：

   cacheGroups: { styles: { name: 'styles', test: /.(css|scss|sass)$/, chunks: 'all', enforce: true } }

2. Vite：启用 build.rollupOptions.output.manualChunks，按路径聚类，比如把 src/styles/**/* 全归到 shared.css，不能只靠 cssCodeSplit
3. 所有构建工具都要求：被复用的样式必须来自同一份 SCSS 文件（如 src/styles/base/_buttons.scss），且所有入口都通过相同相对路径 @use "@/styles/base/buttons" 引入，路径不一致就视为不同模块

怎么写 SCSS 才不拖累分割效果

目标是让构建工具能“看懂”你哪部分想复用，哪部分只属于某个页面。

1. 避免在页面级 SCSS 入口里直接 @use "sass/components/button" —— 改为统一从 src/styles/shared.scss 中集中 @use 并导出混合，页面只 @use "@/styles/shared" as *;
2. 组件级样式（如 Button.vue 的 scoped SCSS）不要 @use 公共变量文件，改用 CSS 自定义属性传值，避免把全局变量链带进每个组件 CSS
3. 慎用 @extend：它会在每个使用处展开选择器，无法被构建工具提取复用；换成 @mixin + 类名组合，至少能靠 PurgeCSS 清掉未使用的实例
4. 开发阶段可加 console.log 式调试：在公共 SCSS 文件顶部加 @debug "loading buttons.scss";，确认它是否真被多处引用

最易被忽略的一点：SCSS 文件路径别名（如 @/styles）必须在构建工具和 Sass 编译器中完全一致，否则 Webpack 看到的是 src/styles/xxx，Sass 解析出来的是 /abs/path/src/styles/xxx，构建工具就认不出这是同一个模块。