Vite中全局注入Sass变量必须配置css.preprocessorOptions.scss.additionalData，路径需相对vite.config.js且用@import "./src/styles/variables.scss";，末尾加分号；@/别名在CSS层不解析，node-sass已废弃，须安装-D sass。
装对包、配对路径、用对配置项，三者缺一不可。Vite 不会自动加载 variables.scss 或 vars.less，不显式注入就等于没写。
为什么装了 sass 还报 Cannot find module 'sass'
这不是配置问题，是运行时模块缺失：
-
sass必须用 Dart Sass（npm install -D sass），node-sass已废弃且 Vite 5+ 完全不兼容 - 安装命令必须带
-D（开发依赖），pnpm add -D sass比pnpm add sass更安全 - Node.js 版本低于 18 时，Dart Sass 可能因引擎不匹配报
Unsupported engine - 全局安装的
sass不会被 Vite 读取——必须本地node_modules里有
additionalData 注入 SCSS 变量时路径怎么写才有效
路径必须相对于 vite.config.js 所在目录，且不能用 @/ 别名（CSS 层不解析别名）：
- ✅ 正确写法：
additionalData: `@import "./src/styles/variables.scss";` - ❌ 错误写法：
additionalData: `@import "@/styles/variables.scss";`（报File to import not found） - 多个文件用分号隔开：
`@import "./a.scss"; @import "./b.scss";` - 末尾加分号可避免语法错误，尤其当注入内容以换行结尾时
LESS 全局变量为什么 additionalData 不生效
Less 的 additionalData 仅支持字符串注入，但它的 @import 是异步解析的，无法保证变量跨文件继承。真正可靠的方式是 modifyVars：
立即学习“前端免费学习笔记（深入）”；
-
modifyVars只接受扁平键值对，如{ '@primary-color': '#1890ff' }，不能传 mixin 或嵌套结构 - 想复用
.clearfix()这类 mixin，得额外加插件（如less-plugin-import），否则modifyVars对它无效 - 如果坚持用
@import，需确保被导入的.less文件本身被至少一个样式文件显式引用，否则构建时可能被跳过
最容易被忽略的是：SCSS 的 additionalData 注入后，变量和 mixin 确实可用，但如果你在 variables.scss 里写了 body { margin: 0 } 这类实际输出 CSS 的规则，它会在每个 .scss 文件开头重复注入——导致样式被多次编译、权重异常、甚至覆盖失效。
