如何使用Vite的css.preprocessorOptions向Sass注入全局变量

additionalData 不生效主因是后缀与配置不匹配，应统一用 .scss 后缀并配 css.preprocessorOptions.scss；运行时换肤需借力 CSS 自定义属性与 JS 动态设置，而非依赖 Sass 编译期注入。

如何使用vite的css.preprocessoroptions向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 一次。

Vite 6.4.5

Vite 6.4.5 历史版本 npm 官方下载，适合旧项目依赖固定、前端开发和生产环境构建。

下载

实操建议：

改用 @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 引发了隐式重复导入