scss全局变量并非真正全局，而是受@use模块作用域限制；必须用as *才能直接访问变量，且需插值#{$var}在css变量中使用，additionaldata仅注入代码而不保证生效。
SCSS 全局变量根本不存在——所谓“全局”，只是你没理解 @use 的模块边界。 它不会自动穿透文件、不会跨 @use 传播，更不会因为写在某个文件里就“天然可见”。变量访问失败，90% 是作用域错配，不是路径或拼写问题。
为什么 @use 导入后变量还是 undefined？
因为 @use 默认创建命名空间，不加 as * 就不能直接用变量名：
-
@use "@/styles/variables"→ 必须写variables.$primary-color才能访问 -
@use "@/styles/variables" as *→ 才能直接写$primary-color - 如果用了
as v，就得写v.$primary-color，别漏掉$ -
@use不支持相对路径通配（比如@use "./**/*.scss"），必须显式声明每个文件
为什么 additionalData 配置了却在某些组件里失效？
它只是在每个 SCSS 文件开头“插入一行代码”，但插入后是否生效，取决于那一行本身是否合法、是否匹配当前文件的模块上下文：
- 配置写成
additionalData: '@import "@/styles/variables.scss";'→ 在启用模块模式（Sass ≥1.23）的项目中会静默失败，@import被降级处理，变量可能被覆盖或丢弃 - 正确写法是
additionalData: '@use "@/styles/variables.scss" as *;'，且确保variables.scss本身没混用@import - Vue 单文件组件中的
<style lang="scss"></style>块也会被注入，但<style scoped></style>不影响变量可用性——作用域只管 CSS 选择器，不管 SCSS 变量 - 如果组件样式是内联
style属性或 JS 动态设置，SCSS 变量完全不可见——它只在编译期起作用
为什么在 CSS 变量里直接写 $color 没效果？
因为 :root { --c: $color } 这种写法里，$color 是 SCSS 语法，但 --c 是纯 CSS 属性值，编译器不会自动解析 SCSS 变量——它需要显式插值：
- 错误：
--text-color: $primary-color; - 正确：
--text-color: #{$primary-color}; - 插值
#{}是唯一让 SCSS 变量“落地”为 CSS 字符串的机制，缺它就等于没写 - 注意：插值只能用于属性值位置，不能用在选择器、
@media条件或@keyframes名称里
uni-app 或 Vite 中 uni.scss / additionalData 失效的根本原因
不是配置错了，而是你误把“预处理器注入”当成了“运行时全局变量”。SCSS 编译是一次性的、静态的：
-
uni.scss只对框架自动注入的样式生效（如页面容器、导航栏），你自己写的<style></style>块默认不继承它 -
additionalData对.vue里的<style lang="scss"></style>有效，但对<style lang="css"></style>或外部.css文件完全无效 - 如果你在 JS 里试图读取
$theme-color，不可能——它早被编译成十六进制了，运行时只剩 CSS 变量或硬编码值 - 真正容易被忽略的一点：Vite 的 HMR（热更新）有时会缓存旧的 SCSS 模块状态，改了
variables.scss但没重启 dev server，变量看起来“没变”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
