scss局部变量仅遮蔽同名全局变量，不跨作用域或文件生效；修改全局值必须在顶层作用域重新定义并确保@import顺序正确，且scss变量与css变量完全无关。
局部变量无法“覆盖”全局变量——它只是在当前作用域内遮蔽（shadow）了同名全局变量，且仅限该作用域生效。真想改全局值，必须在全局作用域里赋值。
为什么局部声明 $color-primary: red 不影响其他文件
SCSS 的 $color-primary 是编译期静态变量，不是运行时引用。你在组件 SCSS 里写：$color-primary: red;
这只是在该文件的当前作用域（比如一个 .btn 规则内部）创建了一个新局部变量，它不会修改任何外部定义的 $color-primary，也不会影响其他文件、甚至同一文件里其他选择器。
常见错误现象：
• 全局 _variables.scss 定义了 $color-primary: #007bff
• 某个 button.component.scss 里写了 $color-primary: #ef4444;，然后用在 .btn { color: $color-primary; }
• 结果只有这个按钮变色，其他所有用到 $color-primary 的地方仍是蓝色
- 这不是“覆盖失败”，而是设计如此：局部变量天然隔离
- SCSS 编译器不追踪跨作用域赋值，
!global也只提升到“当前文件顶层”，不跨文件 - 试图在
@mixin或嵌套规则里用$color-primary: ... !global去“动态改主题”，纯属无效操作
想统一改颜色？必须回到全局作用域重新定义
真正起效的方式，是确保你的新值出现在所有使用该变量的 @import 之前，且位于全局作用域（即不在任何选择器、@mixin 或 @if 内部）。
- 新建
src/styles/override.scss，只放你要改的变量：$color-primary: #2c5e1a;$border-radius-base: 6px; - 在项目主入口 SCSS（如
src/styles.scss）最顶部导入它：@import "override"; - 再导入 UI 库或组件样式：
@use "~element-plus/packages/theme-chalk/src/index" as *;（Element Plus）
或@import "~bootstrap/scss/variables";（Bootstrap） - 关键点：顺序不能错——
override必须在库的variables之前；且所有变量声明必须是顶层语句
@use 和 @import 混用时变量失效的典型原因
当你同时用 @use 和 @import，或者多个 @use 链式调用时，变量作用域会被严格隔离，!default 失效条件更隐蔽。
-
@use "vars" as theme;→ 变量只能通过theme.$primary访问，直接写$primary就报错Undefined variable -
@use "vars" as *;→ 把所有变量注入当前作用域，但若多个as *同时存在，后导入的会覆盖前一个的同名变量，且无警告 - 混用
@import和@use：比如先@import "bootstrap/scss/functions"，再@use "my-vars"，最后@import "bootstrap/scss/variables"—— 此时my-vars里的变量对variables不可见，因为@use创建的是模块作用域，不参与@import的文本拼接逻辑 - 修复方式：全项目统一用
@use，或全用@import；若必须混用，把自定义变量放在所有@import之前，并用@import引入
容易被忽略的“伪覆盖”：CSS 变量和 SCSS 变量根本无关
看到 --color-primary 没变，第一反应别去翻 $color-primary 文件——它们是两套完全独立的系统。
- SCSS 变量
$color-primary编译后就消失了，只留下硬编码值（如color: #2c5e1a） - CSS 变量
--color-primary是浏览器运行时解析的，需手动在:root或某个选择器里声明：:root { --color-primary: #2c5e1a; } - 如果你在 SCSS 里写了
$color-primary: #2c5e1a;，又期望button { color: var(--color-primary); }自动同步，那永远不生效——中间没桥 - 验证方法：打开 DevTools → Computed → 查
的 “Custom Properties”，看--color-primary是否真实存在且值正确
最麻烦的从来不是怎么写变量，而是你改的那一行，到底被谁的 @import 顺序、哪个构建插件的 additionalData、或是哪份 node_modules 里的 !default 给悄悄截胡了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
