根本原因是additionalData注入内容不改变Sass模块作用域判断：用@use需显式命名空间（如as v）并调用v.$var，而@import才支持裸变量；且lang="scss"缺失、HMR缓存、路径别名未配置或IDE删分号等均会导致变量未解析。
SCSS变量在Vue组件里失效，大概率不是变量写错了，而是additionalData没配对作用域或没处理好@use的模块隔离。
为什么additionalData注入后变量仍报“undefined”
根本原因在于：Vite把additionalData内容当作纯字符串插入每个.scss文件顶部，但它不改变Sass编译器对模块作用域的判断。如果你用@use引入变量文件，而没处理命名空间，变量就不可直接访问。
- 错误配置：
additionalData: `@use "@/styles/variables.scss" as *;`—— 看似加了as *，但若variables.scss内部用了@use（比如又@use "sass:math"），它自身就已是模块化上下文，as *无法穿透嵌套模块 - 更隐蔽的问题：某些IDE或编辑器保存时自动格式化，把
@use末尾分号删掉，导致注入代码语法错误，但Sass编译器只静默跳过，不报错 - 开发服务器热更新时，部分
.vue里的<style lang="scss">块可能被缓存，未重新触发additionalData注入，重启才能生效
additionalData该用@import还是@use
短期见效选@import，长期维护必须迁移到@use——但得改写方式。
- 用
@import：直接全局注入，变量可裸名使用，适合老项目快速修复additionalData: `@import "@/styles/variables.scss";` - 用
@use：必须显式暴露所有需用变量，不能依赖as *偷懒additionalData: `@use "@/styles/variables.scss" as v;`，然后在组件里写v.$primary-color - 混合项目慎用二者混搭：一个文件里同时出现
@import和@use，Sass会降级为兼容模式，@use的模块性失效，变量可能被覆盖或丢失
Vue单文件组件中lang="scss"被忽略的典型场景
即使additionalData配对了，<style>块仍可能绕过SCSS编译流程。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
-
<style scoped>但没写lang="scss"：Vite默认当CSS处理，$color直接原样输出到CSS，浏览器报无效属性值 -
<style lang="scss" scoped>里用了:deep()或::v-deep，而父组件样式也含SCSS变量，此时变量作用域不跨深度选择器传递 - HMR（热模块替换）异常：修改
variables.scss后，已打开的Vue组件未重载<style>块，需手动刷新或关闭HMR测试 - 注意
scoped与module不兼容：若同时用了lang="scss"和module，Vite会优先走CSS Modules逻辑，SCSS变量不参与注入
如何验证additionalData是否真正生效
别只看控制台有没有报错，要进编译产物里查真实注入结果。
- 在任意
.vue文件的<style lang="scss">里临时加一行：body { content: "#{$primary-color}"; }，然后打开DevTools → Elements → 查看<style>标签内容，确认这行是否被编译成body{content:"#3b82f6"}；如果还是content: "$primary-color"，说明additionalData根本没注入 - 检查Vite启动日志：成功加载
additionalData时，会打印[vite] loaded scss options，没这句代表配置未被识别 - 路径别用别名陷阱：
@/styles/variables.scss在vite.config.ts里需确保resolve.alias已正确定义，否则注入的是空字符串
最易被忽略的一点：Vite 5+ 默认启用css.dev.sourcemap，但additionalData注入的内容不会出现在source map里——你看到的编译后CSS里找不到那行@use，不代表它没执行，得靠变量是否解析来反推。
