scss本身不支持运行时代码分割，重复样式源于构建工具未配置css去重或滥用@use导致多入口重复引入；需通过splitchunks.cachegroups（webpack）或manualchunks（vite）提取公共scss模块，并确保所有入口使用一致路径@use同一文件。
SCSS 本身不支持运行时代码分割，所谓“分割后重复加载”，根本原因是构建工具没配置好，或者 @use 被滥用——不是 Sass 编译错了，是你在多个入口里反复 @use "components/button"，导致样式被复制进每个 CSS 包。
为什么重复样式总出现在打包产物里
常见错误现象：多个页面的 CSS 文件里都包含一模一样的 .btn { background: #007bff; }，哪怕只在一个地方写了 @include button-styles。
-
@use是编译期导入，它不合并、不 dedupe，只做命名空间隔离；重复@use就等于重复插入样式块 - Webpack 默认不会对 CSS 做模块级去重，
splitChunks只按文件路径切分，不识别 SCSS 模块语义 - Vite 的
cssCodeSplit: true默认按入口拆，但若多个入口都@use "shared/mixins"，这些 mixin 展开后的 CSS 仍会重复
真正起作用的配置项在哪
关键不是改 SCSS 写法，而是让构建工具识别“哪些样式该共用”。
- Webpack：必须显式配置
splitChunks.cacheGroups，把公共 SCSS 模块提取到单独的vendor.css中，例如：cacheGroups: { styles: { name: 'styles', test: /\.(css|scss|sass)$/, chunks: 'all', enforce: true } } - Vite：启用
build.rollupOptions.output.manualChunks，按路径聚类，比如把src/styles/**/*全归到shared.css，不能只靠cssCodeSplit - 所有构建工具都要求：被复用的样式必须来自同一份 SCSS 文件（如
src/styles/base/_buttons.scss），且所有入口都通过相同相对路径@use "@/styles/base/buttons"引入，路径不一致就视为不同模块
怎么写 SCSS 才不拖累分割效果
目标是让构建工具能“看懂”你哪部分想复用，哪部分只属于某个页面。
- 避免在页面级 SCSS 入口里直接
@use "sass/components/button"—— 改为统一从src/styles/shared.scss中集中@use并导出混合，页面只@use "@/styles/shared" as *; - 组件级样式（如
Button.vue的 scoped SCSS）不要@use公共变量文件，改用 CSS 自定义属性传值，避免把全局变量链带进每个组件 CSS - 慎用
@extend：它会在每个使用处展开选择器，无法被构建工具提取复用；换成@mixin+ 类名组合，至少能靠 PurgeCSS 清掉未使用的实例 - 开发阶段可加
console.log式调试：在公共 SCSS 文件顶部加@debug "loading buttons.scss";，确认它是否真被多处引用
最易被忽略的一点：SCSS 文件路径别名（如 @/styles）必须在构建工具和 Sass 编译器中完全一致，否则 Webpack 看到的是 src/styles/xxx，Sass 解析出来的是 /abs/path/src/styles/xxx，构建工具就认不出这是同一个模块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
