查不到$primary-color需先确认组件库变量体系：vue库查css自定义属性，react库查scss变量；变量声明须在@use/@import前；css变量需加fallback值；检查组件内硬编码色值、css优先级及深色模式变量名差异。
查不到 $primary-color？先确认组件库用的是哪套变量体系
不同组件库的 CSS 变量命名和暴露方式完全不同，直接搜文档里“颜色”“theme”“token”可能漏掉关键路径。比如 Ant Design 的 SCSS 变量在 @ant-design/colors 单独包里，而 Element Plus 的 CSS 自定义属性（--el-color-primary）只在运行时注入，源码里压根不写死。
- Vue 组件库（如 Element Plus、Naive UI）优先查
:root下的 CSS 自定义属性，用浏览器开发者工具「Computed」面板搜color或--.*-color - React 组件库（如 Ant Design、Mantine）多数用 SCSS 变量，得翻
node_modules里的variables.scss或官方主题定制文档页，注意看是否要求@use而非@import - 没文档或变量被封装了？直接查组件 DOM 上实际生效的
style值，逆向定位到对应 CSS 规则，再顺藤摸瓜找变量来源
SCSS 中正确引入并覆盖 $primary 类变量的写法
很多项目失败是因为把变量声明放错了位置——SCSS 变量必须在 @use 或 @import 组件库样式之前定义，否则会被库内默认值覆盖。
- Ant Design：必须用
@use '~antd/dist/reset.css'+@use '~antd/lib/style/themes/default'，再提前定义$primary-color: #1890ff - Element Plus：变量在
element-plus/theme-chalk/src/common/var.scss，需@use并with覆盖，例如：@use 'element-plus/theme-chalk/src/common/var' with ($colors: ('primary': #2e7dff)) - 别用
!default硬覆盖：组件库变量本身已带!default，你在后面重声明同名变量无效，必须在@use的with块里传入
CSS 自定义属性（--el-color-primary）怎么安全复用？
直接在自己的 CSS 里写 color: var(--el-color-primary) 看似简单，但容易踩两个坑：变量未定义时回退失效，以及 SSR 场景下服务端渲染时变量还没注入。
- 务必加 fallback 值：
color: var(--el-color-primary, #409eff)，否则变量不存在时会变成透明色 - 不要依赖组件库自动注入的
:root变量——有些库（如 Naive UI）只在组件挂载后才写入，全局 CSS 里引用可能取不到值 - 更稳妥的做法是：从组件库导出 JS 颜色对象（如
import { darkTheme } from 'naive-ui'），再用 JS 注入到:root，或生成对应 CSS 变量表
为什么改了变量，按钮颜色却没变？检查这三处
最常被忽略的是组件内部硬编码的颜色值，尤其在伪类、禁用态、加载态这些边缘状态里。
- 查组件源码中是否用了
#1890ff这类字面量色值（而非变量），这类写死的值不会随主题变量变化 - 检查 CSS 优先级：你自定义的
.my-btn { color: var(--xxx) }可能被组件库更具体的规则（如.el-button.is-disabled .el-button__text）覆盖 - 深色模式切换后变量名变了：Element Plus 深色模式用
--el-color-primary-dark-2，不是简单替换primary就行
变量系统不是开关，是拼图——每一块都得对上位置、时机和作用域，少一个就断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
