SCSS变量在<style lang="scss" scoped>中失效，主因是additionalData注入未改变Sass模块作用域判定：@use需显式命名空间（如as v）且variables.scss内不得嵌套@use，IDE删分号、HMR缓存、漏写lang="scss"或混用scoped与module均会导致变量不可访问。
SCSS变量在<style lang="scss" scoped>里失效，90%不是变量写错了，而是编译链路或作用域配置断了——尤其当用了@use、漏了lang="scss"、或热更新没刷新注入内容时。
为什么additionalData注入后变量还是undefined
根本原因：Vite把additionalData当成纯字符串插到每个.scss文件顶部，但它不改变Sass对模块作用域的判定逻辑。如果你用@use引入变量文件，又没处理命名空间，变量就不可裸名访问。
-
additionalData: `@use "@/styles/variables.scss" as *;`看似能全局暴露，但如果variables.scss内部自己又@use "sass:math"，那as *就失效了——模块嵌套后无法穿透 - 某些IDE（如VS Code）保存时自动删掉
@use末尾分号，导致注入代码语法错误；Sass编译器静默跳过，不报错也不生效 - HMR缓存可能让已打开的.vue组件没重载
<style>块，改了variables.scss也看不到效果，必须手动刷新或临时关HMR验证
lang="scss"被忽略的三种典型场景
即使additionalData配对了，<style>仍可能绕过SCSS编译流程：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 写了
<style scoped>但漏掉lang="scss"：Vite默认走CSS解析器，$color原样输出成CSS，浏览器直接报无效属性值 - 用了
:deep()或::v-deep，而父组件样式也含SCSS变量：变量作用域不跨深度选择器传递，:deep(.el-input) { color: $primary-color; }里的$primary-color不会被识别 - 同时用了
scoped和module：Vite优先走CSS Modules逻辑，SCSS变量注入被跳过
@import vs @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的模块性失效，变量可能被覆盖或丢失
如何验证additionalData是否真生效
别只看控制台有没有报错——要进编译产物查真实注入结果。打开node_modules/.vite/deps或构建后的dist/assets/xxx.css，搜索变量名，确认它是否出现在生成的CSS里。如果没出现，说明注入根本没走通；如果出现了但值不对，大概率是!default被第三方库同名变量覆盖了，得全局搜$varname:定位定义位置。
