scss变量（$xxx）与css变量（--xxx）完全独立，!global仅影响前者编译期作用域，无法覆盖后者；正确覆盖css变量须通过层叠规则在更具体选择器中重声明--xxx，如.card-dark { --color-primary: #1e40af; }。
SCSS变量根本不会覆盖CSS变量，别用!global硬凑
写$color-primary: #ef4444 !global之后发现button { background-color: var(--color-primary); }没变色——这不是编译失败，而是你混淆了两个完全不互通的系统。$color-primary是Sass编译期静态值，--color-primary是浏览器运行时动态变量，!global只影响前者的作用域，对后者零作用。
常见错误现象：在@mixin里声明$theme-color !global，以为能同步到var(--theme-color)；结果CSS里压根没生成--theme-color，或者生成了但值还是旧的。
-
!global唯一有效场景：让一个局部$变量（比如在@media块内算出的颜色）能在文件其余地方被读取，仅此而已 - 它不生成、不修改、不读取任何
--xxx，和var()毫无关系 - 想让
var(--color-primary)变色，必须在CSS层叠中重声明该变量，例如：.card-dark { --color-primary: #1e40af; }
真正要覆盖CSS变量，靠的是选择器层级和层叠顺序
CSS变量的“覆盖”本质是层叠（cascade），不是赋值。同一个--color-primary，谁的声明更具体、位置更靠后，谁就生效。
正确做法是把新值放在更具体的选择器下，并确保HTML结构包裹到位：
- 基础定义放
:root：:root { --color-primary: #3b82f6; } - 覆盖定义放容器类：
.theme-contrast { --color-primary: #dc2626; } - HTML中必须有对应结构：
<div class="theme-contrast"><button>点我</button></div> - 不要试图用
$color-primary去“驱动”--color-primary——它们之间没有绑定机制
SCSS里生成CSS变量，必须用#{}插值
在SCSS中写--color: $primary;是错的，这会让编译结果变成字面量--color: $primary;，浏览器无法识别。
所有SCSS变量注入CSS自定义属性，都必须显式插值：
- 错误写法：
--bg: $color-lm-bg-primary; - 正确写法：
--bg: #{$color-lm-bg-primary}; - 带函数计算也要包住：
--bg-light: #{lighten($primary, 10%)}; - 插值只发生在编译期，生成的是静态值，不是可运行时更新的变量
组件库主题定制失败？检查变量声明顺序和引入方式
改了$primary-color但Element Plus按钮颜色不变，大概率是变量没生效——不是语法错，是加载逻辑断了。
关键约束只有两条，缺一不可：
- 所有自定义变量必须出现在
@import组件SCSS之前，例如：$primary-color: #409eff; @import "~element-plus/theme-chalk/src/index.scss"; - 必须引入源SCSS文件（
src/路径），不能引入编译好的dist/*.css——后者根本不认识$变量 - 确认变量声明带
!default（如$primary-color: #409eff !default;），否则直接赋值会被跳过 - UniApp等平台还要额外满足：
<style lang="scss"></style>、变量名用短横线（$main-color）、uni.scss放在项目根目录
最容易被忽略的一点：!global声明的变量不会跨@use模块传播，即使用了!global，其他模块仍需显式@use "vars" as *或通过命名空间访问。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
