additionalData 不生效主因是后缀与配置不匹配，应统一用 .scss 后缀并配 css.preprocessorOptions.scss；运行时换肤需借力 CSS 自定义属性与 JS 动态设置，而非依赖 Sass 编译期注入。
为什么 css.preprocessorOptions.sass 里的 additionalData 不生效
常见现象是变量在组件样式里报错 Undefined variable，或换肤后颜色没变。根本原因不是配置写错了，而是 Vite 默认只对 .scss 文件生效，而你可能用了 .sass（缩进语法）——它走的是 css.preprocessorOptions.sass 的兄弟项 css.preprocessorOptions.sass（注意：Vite 中 sass 配置项实际覆盖两种语法，但 additionalData 对 .sass 文件支持不稳定）。更稳妥的做法是统一用 .scss 后缀，并确保配置命中正确字段。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 项目中所有 Sass 文件使用
.scss后缀（哪怕内容是缩进式，也改后缀并加indentedSyntax: false） - 在
vite.config.ts中只配css.preprocessorOptions.scss，不要碰sass字段（Vite 文档里写的sass是历史遗留别名，实际推荐用scss） -
additionalData必须以@use或@import开头，且路径为相对src/的有效路径，例如：@use "@/styles/vars.scss" as *;
如何用 additionalData 注入全局变量并支持运行时换肤
纯 additionalData 只能在构建时注入，无法实现“运行时一键换肤”。真正可行的路径是：把主题变量抽成 CSS 自定义属性（css-vars），再用 JS 动态切换 :root 上的值。Sass 层只负责编译时生成多套 CSS 变量映射，不参与运行时逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
src/styles/theme.scss中定义主题变量映射，例如：$theme-light: ("primary": #007bff, "bg": #fff); $theme-dark: ("primary": #0056b3, "bg": #212529); - 用 Sass 循环生成对应 CSS 自定义属性：
@each $key, $val in $theme-light { --color-#{$key}: #{$val}; } - 在
vite.config.ts的css.preprocessorOptions.scss.additionalData中注入：@use "@/styles/theme.scss";—— 这样每个.scss文件都能直接用theme.scss里的函数和 map - 换肤动作交给 JS：调用
document.documentElement.style.setProperty('--color-primary', '#007bff')，或批量设置整个 theme map
为什么不能直接在 additionalData 里写 @import "@/styles/vars.scss"
会触发重复导入警告，甚至导致变量被覆盖。Sass 的 @import（已废弃）和 @use 都有作用域和加载顺序限制：additionalData 是在每个文件开头插入，如果多个组件都引用了同一份 vars.scss，就会变成多次 @use 同一模块，而 Sass 要求模块只能被 @use 一次。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
@forward+ 单入口统一导出：新建src/styles/index.scss，里面@forward "@/styles/vars"和@forward "@/styles/theme" - 在
vite.config.ts中只注入这一行：@use "@/styles/index.scss" as *; - 所有组件样式里不再手动
@use，直接用变量和函数 - 避免在
additionalData中写带路径的@import，它不支持 Sass 模块系统，容易破坏作用域
换肤时 Sass 编译产物体积暴增？检查 css.preprocessorOptions.scss 是否误配了 includePaths
如果在 includePaths 里加了 src/，Sass 会把整个 src/ 当作查找路径，导致 @use "utils" 这类语句匹配到任意同名文件，引发重复编译、循环依赖，最终 CSS 体积翻倍甚至构建失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
includePaths只保留必要路径，例如["src/styles"]，不要写"src/" - 所有
@use使用绝对路径别名（如@use "@/styles/vars"），它由 Vite 的别名解析处理，不走 Sass 的includePaths - 构建后检查
dist/assets/*.css大小，若某主题 CSS 是其他几倍，大概率是includePaths引发了隐式重复导入
换肤本身不复杂，难的是让 Sass 编译期和 CSS 运行期各司其职——变量定义归 Sass，状态切换归 JS，中间那层 CSS 自定义属性不能少，也不能靠 additionalData 硬塞。
