直接在nuxt.config.ts中配置vite.css.preprocessoroptions.scss.additionaldata可全局注入sass变量，但需确保sass与sass-loader正确安装（推荐sass@1.77+、sass-loader@14）、路径无误、变量文件语法正确且末尾带分号，并重启开发服务器验证。
直接在 nuxt.config.ts 里配 vite.css.preprocessorOptions.scss.additionalData 就能全局注入变量，但必须确保路径正确、依赖齐全，否则变量在组件里用时会报 Undefined variable 错误。
确认 sass 和 sass-loader 已安装
这是最常被跳过的一步：Nuxt3 默认不带 Sass 编译能力，只装 sass 不够，sass-loader 必须同时存在，且版本要匹配（推荐 sass-loader@14 + sass@1.77 及以上）。
-
npm install -D sass sass-loader（使用 pnpm 就换pnpm add -D） - 装完检查
node_modules下是否有sass和sass-loader目录 - 如果项目之前装过旧版
sass-loader@10或更低，务必卸载重装，否则 Vite 会拒绝加载
在 vite.css.preprocessorOptions 中注入变量文件
Nuxt3 基于 Vite，所以全局 Sass 变量必须走 Vite 的预处理器配置，而不是旧版 Nuxt 的 build.loaders 或 styleResources 模块（后者在 Nuxt3 中已废弃且不生效）。
- 变量文件建议放在
assets/scss/variables.scss（路径可自定，但需和下面配置一致） -
nuxt.config.ts中写法必须是字符串拼接形式，不能用path.resolve或动态导入：
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/scss/variables.scss";'
}
}
}
}
-
@/别名在additionalData中可用，但~不行；若用相对路径，得从项目根开始算，比如../assets/scss/variables.scss - 注意末尾分号不能漏，否则整个
additionalData解析失败，变量全失效
验证变量是否真正生效
光配置完不等于能用——Vue 单文件组件中 <style lang="scss"></style> 块才能识别这些变量，<style scoped></style>（默认 CSS）或 <style lang="css"></style> 完全无感知。
- 在
pages/index.vue里写：<style lang="scss"> .test { color: $primary-color; } </style> - 如果报错
Undefined variable "$primary-color"，先检查变量文件是否导出（如$primary-color: #3498db;），再确认additionalData路径是否拼错 - 重启开发服务器（
pnpm run dev）——Vite 不会热更新这个配置，改了nuxt.config.ts必须重启 - 别在
<script setup></script>里尝试读取$primary-color，Sass 变量只作用于样式编译期，运行时不存在
最容易被忽略的是：变量文件本身不能有语法错误（比如漏分号、嵌套错误），哪怕只有一行错，整个 additionalData 就静默失效，而控制台通常不报 Sass 解析错误，只会让你在组件里反复看到 Undefined variable。建议先单独用 sass CLI 编译一次变量文件验证语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
