vite 中全局注入 sass/less 变量需严格配置 preprocessoroptions：sass 用 scss.additionaldata + @use（路径需正确、加分号），less 用 modifyvars（仅变量）或 additionaldata + @import（mixin 需插件），且必须安装对应依赖（sass/less）并确保路径相对于 vite.config.js。
在 Vite 中，css.preprocessorOptions 是全局注入 Sass 或 Less 变量的唯一可靠入口，但必须配对、配准、配对路径——三者缺一不可。
配置位置必须是 scss 或 less，不是 sass
很多人配错入口，导致变量不生效：
-
css.preprocessorOptions.scss.additionalData→ 作用于所有.scss文件（推荐） -
css.preprocessorOptions.less.additionalData→ 作用于所有.less文件 -
css.preprocessorOptions.sass只影响.sass（缩进语法），和.scss完全无关
Sass 全局变量：用 additionalData 拼接 @use 或 @import
推荐使用 Dart Sass 的 @use 语法，更安全：
- 写法示例：
additionalData: '@use "@/styles/variables.scss" as *;' - 路径中的
@/别名需已在vite.config.js的resolve.alias中正确定义 - 若别名不可靠，改用相对路径：
additionalData: '@use "./src/styles/variables.scss" as *;' - 末尾必须加分号
;，否则编译报错 - 变量文件里不能直接写样式规则（如
body { margin: 0 }），否则会在每个 SCSS 文件开头重复输出
Less 全局变量：优先用 modifyVars，additionalData 有局限
Less 不支持 @use，且 additionalData 对 @mixin 无效：
- 纯变量（如颜色、尺寸）用
modifyVars：less: { modifyVars: { '@primary-color': '#1890ff' } } - 含
.clearfix()这类 mixin 时，modifyVars不起作用，需额外加插件（如less-plugin-import） -
additionalData在 Less 中可注入@import，但子文件里的变量不会自动继承，作用域受限
依赖和路径两个硬性前提不能漏
没装对包或路径写错，配置再准也白搭：
- Sass 必须装
sass（Dart Sass），命令：pnpm add -D sass；node-sass已废弃，Vite 5+ 完全不兼容 - Less 对应装：
pnpm add -D less - 路径必须相对于
vite.config.js所在目录，CSS 层不解析@/别名（即使 alias 配了也不行） - 变量文件本身必须被至少一个样式文件显式引用，否则构建时可能被跳过，且不报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
