scss变量不生效需先查!default是否被覆盖：若同名变量已在别处定义（如node_modules中），!default将跳过赋值；在:root中使用必须插值#{$var}，否则无效。
SCSS变量不生效，先查!default是否被覆盖
SCSS中$var: value !default不是“设默认值”，而是“仅当变量未定义时才赋值”。一旦前面已有同名变量（哪怕在另一个文件、另一个@import块里），它就完全跳过——你改了variables.scss里的值，但实际生效的可能是某个第三方库或组件内部悄悄定义的同名变量。
常见错误现象：$spacing-sm在自己写的组件里始终是8px，明明已改成12px；或者$color-primary突然变成灰色，检查源码却发现没动过。
- 用开发者工具的“Sources”面板搜索整个项目，看是否有多个
$color-primary:定义，尤其注意node_modules下的UI库（如nutui-uniapp或element-plus的scss入口） - 在终端运行
grep -r "\$color-primary:" src/ node_modules/（Linux/macOS）或用VS Code全局搜索，确认定义顺序 - 避免在多个地方用
!default反复声明同一变量——这会让最终值取决于编译顺序，极难调试 - 真正想“覆盖”时，应去掉
!default，直接赋值；想“提供可选默认”则只在最上游（如variables.scss顶部）声明一次
在:root里用SCSS变量必须插值
SCSS变量不能直接出现在CSS自定义属性（--xxx）的值位置。写--color: $primary;会被当成字面量字符串，不是颜色值，最终生成的CSS是无效的。
必须用#{$primary}显式插值，让Sass在编译期把变量展开为真实值。
- 错误写法：
--bg-primary: $color-lm-bg-primary; - 正确写法：
--bg-primary: #{$color-lm-bg-primary}; - 如果变量是计算值（如
lighten($primary, 10%)），也得包在#{...}里：--bg-light: #{lighten($primary, 10%)}; - 注意：插值只在Sass编译时起作用，无法用于运行时JS读取的CSS变量——那是另一层逻辑
UniApp里uni.scss变量失效，重点看lang和命名规范
UniApp对SCSS变量的支持有硬性约束，不满足任一条件，变量就静默失效，连报错都没有。
-
<style></style>标签必须显式写lang="scss"，写成lang="css"或漏掉该属性，SCSS变量解析器根本不会启动 - 变量名必须用短横线分隔（
$main-color），不能用驼峰（$mainColor）——小程序底层CSS解析器对标识符合法性校验更严格 -
uni.scss必须放在项目根目录（与pages.json同级），放错路径（如src/uni.scss）会导致框架完全忽略它 - 如果用了
@use或@import手动引入其他变量文件，要确保路径以@/开头且拼写准确，比如@import "@/styles/vars.scss";
Vite中additionalData注入@use后变量仍不可用
additionalData只是在每个SCSS文件开头插入代码，它不改变模块作用域规则。如果你注入的是@use "variables" as *，那该文件内确实能直接用$color-primary；但若该文件里又@use了另一个模块（比如@use "mixins"），而mixins.scss内部想用$color-primary，它依然访问不到——因为@use的作用域是文件级的，不穿透。
- 别指望
additionalData实现“真全局”，它只是语法糖，本质仍是每个文件单独@use - 如果组件库的SCSS文件（如
nut-button.scss）需要你的变量，必须在它内部也写@use，或让库作者支持with配置参数 - 混用
@import和@use会破坏模块系统：只要一个文件用了@import，它和所有被它@import的文件都会退回到旧作用域模型，@use注入的变量可能被忽略 - 验证方式：在任意SCSS文件里临时加一行
@debug variables.$color-primary;，看控制台是否输出值
最容易被忽略的点是：SCSS变量作用域和CSS变量作用域完全不重叠。前者在编译期求值，后者在运行时级联生效。把两者混为一谈，比如以为$color-primary改了，var(--primary)就会自动更新，是绝大多数失效问题的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
