SCSS变量未生效的根本原因是引入了编译后的CSS而非源SCSS文件，且变量必须在@import前声明并确保加载器配置正确，同时需确认变量是否带!important标记及合理控制编译范围。
SCSS变量没生效？检查是否正确引入了源文件
很多同学改了 $primary-color 之类的变量，样式却完全没变。根本原因往往是：你正在修改的是 CSS 组件库的 SCSS 源码变量定义，但项目里实际引入的却是它编译好的 dist/*.css 文件——那当然不会响应你的变量改动。
- 确保在项目中 import 的是组件库提供的 SCSS 入口（比如
@import "~element-plus/theme-chalk/src/index.scss"，而不是element-plus/dist/index.css） - 如果用 Vite 或 Webpack，确认已配置好
sass加载器，且支持全局变量注入（例如 Vite 的css.preprocessorOptions.sass.additionalData） - Element Plus、Naive UI、Ant Design Vue 等主流库都要求「自己编译主题」，不提供运行时变量切换
覆盖变量必须在 @import 组件样式前声明
SCSS 变量作用域是「首次赋值有效」，后声明的同名变量不会覆盖前面已使用的值。所以如果你在 @import 后才写 $primary-color: #ff6b6b;，基本等于白写。
- 所有自定义变量必须放在
@import组件库 SCSS 文件之前 - 推荐结构：
$primary-color: #409eff; $border-radius: 4px; @import "~element-plus/theme-chalk/src/index.scss";
- 不要试图在组件内部
:deep()或::v-deep里重设变量——SCSS 变量不是 CSS 自定义属性，不能运行时改
部分组件库不支持全部变量覆盖
不是所有看起来像变量的 SCSS 声明都能被安全覆盖。有些是内部计算用的中间值（如 $button-height-sm），有些是硬编码在 mixin 里的（如 el-button 的 font-weight 直接写死为 500），还有些变量被标记为 !default 才可覆盖。
- 查看组件库源码中变量声明是否带
!default（例如$primary-color: #409eff !default;），没带的大概率无法覆盖 - Element Plus v2.3+ 开始把大量颜色变量移到了
theme-chalk/src/common/var.scss，但边框、阴影、动画时长等仍分散在各组件文件里 - Naive UI 的变量更集中，但部分尺寸类变量（如
$card-padding）只影响容器，不联动子元素内边距
构建后 CSS 体积和维护成本容易被低估
每次改一个颜色变量，整个组件库的 SCSS 都会重新编译。Element Plus 全量编译后 CSS 轻松破 300KB，而你可能只改了按钮色。
立即学习“前端免费学习笔记（深入）”；
- 只导入用到的组件样式（
@import "~element-plus/theme-chalk/src/button.scss"），别无脑index.scss - 避免在多个地方重复覆盖同一套变量，建议统一收口到
styles/variables.scss，再由主入口引入 - 如果团队里只有 1–2 人懂 SCSS，又需要频繁换肤，不如直接上 CSS 自定义属性 + JS 切换方案，更可控也更容易 debug
变量覆盖这事，看着是改几行代码，实际卡在路径、顺序、作用域、编译链路上的坑比想象中多。尤其当多个 UI 库混用，或者用了微前端架构时，各自的主题编译环境稍有不一致，就全乱套。
