答案是scss变量必须用vite.css.preprocessoroptions.scss.additionaldata注入，css变量则需通过css数组引入，二者机制不同不可混用；additionaldata字符串末尾分号不能漏，路径支持@/别名但不支持~，变量文件语法须严格正确。
直接在 nuxt.config.ts 里配 vite.css.preprocessorOptions.scss.additionalData 就能全局注入 SCSS 变量，但 CSS 变量（:root）必须走 css 数组引入，两者机制完全不同，混用会失效。
SCSS 变量必须用 additionalData 注入，不能靠 css 数组
很多人误以为把 variables.scss 加到 css: ['~/assets/scss/variables.scss'] 就能让所有 <style lang="scss"></style> 读到变量——这是错的。CSS 数组只做样式加载，不参与 SCSS 编译上下文，变量根本不会被解析。
-
additionalData是 Vite 的预处理器钩子，在每个 SCSS 文件编译前自动拼接字符串，相当于每份<style lang="scss"></style>开头都隐式加了@import - 路径必须写成字符串形式：
'@import "@/assets/scss/variables.scss";'，末尾分号不能漏，否则整个注入静默失败 -
@/别名可用，~不可用；若用相对路径，得从项目根目录算起，比如'../assets/scss/variables.scss' - 变量文件本身语法要严格：每条声明结尾必须有分号，嵌套规则不能错，哪怕一行写漏分号，整个
additionalData都不生效
CSS 自定义属性（:root）要走 css 数组，且仅作用于运行时
如果你写的是纯 CSS 变量，比如 :root { --primary-color: #3498db; }，那就得走 css 字段，和 SCSS 完全无关。
- 在
nuxt.config.ts中添加：css: ['~/assets/css/vars.css']，这个文件会被注入到页面的<style></style>标签里 - 它对所有 CSS、SCSS、甚至内联
style都有效，但只在浏览器运行时起作用，编译期不可用（比如不能在 SCSS 中用var(--primary-color)直接参与计算） - 如果同时需要编译期变量（SCSS）和运行时变量（CSS），就得两套并存：一个放
additionalData，一个放css数组
常见错误：Sass 和 sass-loader 版本不匹配或缺失
报 Undefined variable 却确认路径和语法都没问题？大概率是底层编译器没装对。
- Nuxt 3 默认不带 Sass 支持，
sass和sass-loader必须同时安装，缺一不可 - 推荐组合：
sass@1.77.6++sass-loader@14.2.1+；旧版sass-loader@10或更低会直接被 Vite 拒绝加载 - 装完检查
node_modules下是否有这两个包目录；如果之前装过旧版，先pnpm remove sass-loader sass再重装 - 改完
nuxt.config.ts后必须重启开发服务器——Vite 不热更新这个配置
<style scoped></style> 和 <script setup></script> 里都不能用 SCSS 变量
SCSS 变量只存在于构建阶段，不是 JavaScript 运行时对象，这点极易混淆。
-
<style lang="scss" scoped></style>可以用，因为编译器会处理它 -
<style scoped></style>（默认 CSS）或<style lang="css"></style>无法识别$primary-color，会报错 -
<script setup></script>里写console.log($primary-color)是无效的，这个变量在 JS 执行时早已不存在 - 想在 JS 里读取颜色值？要么用 CSS 变量 +
getComputedStyle，要么把值同步导出到 runtimeConfig（服务端）或 defineAppConfig（客户端）
最常被忽略的其实是变量文件本身的语法洁癖：漏一个分号、多一个空格、缩进错位，都会让整个 additionalData 失效，而控制台没有任何提示——只能靠逐行注释排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
