因为vite将sass和scss视为两个独立预处理器，项目使用.scss文件时必须配置在css.preprocessoroptions.scss下而非sass字段；配错位置导致additionaldata不被读取，变量报undefined variable。
为什么 css.preprocessorOptions.sass 配置不生效
因为 Vite 把 sass 和 scss 当作两个独立预处理器。你项目里用的是 .scss 文件（绝大多数情况），就必须配在 css.preprocessorOptions.scss 下，而不是 sass 字段。配错位置后，additionalData 完全不会被读取，变量自然报 Undefined variable。
常见错误包括：
- 在
scss配置块里写sass字段名 - 误以为
sass是通用入口，结果只影响极少数.sass（缩进语法）文件 - 没删掉旧的
sass配置，导致新scss配置被覆盖或忽略
additionalData 字符串必须怎么写才合法
它本质是拼到每个 .scss 文件最开头的一段 SCSS 代码，所以必须符合语法，否则整个编译失败。
- 必须以
@use或@import开头，推荐@use "@/styles/variables.scss" as *; - 路径要用引号包裹，且必须走
@/别名（前提是vite.config.ts中已配置resolve.alias） - 末尾必须加分号
;，漏掉会导致下一行样式被吞成非法语句，报错类似Invalid CSS after "" - 建议用反引号包裹整个字符串，方便换行和避免引号嵌套问题：
additionalData: `@use "@/styles/variables.scss" as *;`
variables.scss 文件里能写什么、不能写什么
这个文件只负责“定义”，不负责“输出”。任何实际生成 CSS 的规则，都会被重复注入到每个组件样式中，造成权重异常、体积膨胀甚至样式覆盖失效。
- ✅ 允许：
$primary-color: #1890ff;、@mixin flex-center { display: flex; justify-content: center; }、@function px2rem($px) { @return $px / 16rem; } - ❌ 禁止：
body { margin: 0; }、.btn { color: $primary-color; }、@import "normalize";（除非你确认被导入的文件也纯定义） - ⚠️ 注意：文件里不能有 BOM 头、中文注释、未闭合的
/*注释，这些都可能让整个additionalData注入失败
装什么包、怎么装才对
Vite 5+ 只支持 Dart Sass，node-sass 已彻底废弃且无法工作。
- 必须执行：
pnpm add -D sass（或npm install -D sass），-D不可省略 - 全局安装的
sass不会被 Vite 读取，只认node_modules里的本地版本 - Node.js 版本低于 18 时，Dart Sass 可能因引擎不匹配报
Unsupported engine - 如果用了 pnpm + PnP 模式，要确认
sass在.pnpm目录下真实存在，否则运行时报Cannot find module 'sass'
真正容易被忽略的不是配置写法，而是 variables.scss 里混进了哪怕一行实际输出 CSS 的代码——它不会报错，但会让所有组件样式悄悄变重、变乱，排查起来非常隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
