按钮仍为蓝色是因为element-plus/dist/index.css已将颜色硬编码为#409eff，浏览器直接读取该值而非CSS变量；必须删除该CSS引入，改用SCSS源码编译并确保@use定制变量优先加载。
为什么$--color-primary改了但按钮还是蓝色？
不是你写错了，是变量根本没参与编译——Element Plus 的 dist/index.css 已把颜色硬编码成 #409eff，浏览器直接读十六进制值，压根不查 :root 或 SCSS 变量。DevTools 里点一个 <el-button>，在 Computed 面板搜 background-color，如果显示的是 rgb(64, 158, 255) 而不是 var(--el-color-primary)，就坐实了变量被绕过。
必须立刻检查：main.ts 或 main.js 里是否还留着 import 'element-plus/dist/index.css'——删掉它，一步都不能少。
@use 覆盖变量时路径报错或无效？
报 Can't find stylesheet to import，大概率不是路径写错，而是构建链路断了。Element Plus 的 SCSS 源码依赖 sass（不是 node-sass）和正确的模块解析能力。
- 执行
npm install sass --save-dev（必须是sass，node-sass已废弃） - 确保
tsconfig.json或jsconfig.json里配了"baseUrl"和"paths"，比如"@/*": ["src/*"]，避免相对路径失效 -
@forward必须放在文件最顶部，且路径要写全：@forward 'element-plus/theme-chalk/src/common/var.scss' with ( ) - 别用
@import——Dart Sass 已弃用它，会导致变量未覆盖或重复声明
按需导入下主题色仍是默认蓝？
配了 importStyle: 'sass' 却没用，大概率是插件配置漏项。unplugin-vue-components 和 unplugin-auto-import 是两个独立插件，各自 resolver 都得单独设 importStyle: 'sass'，漏一个就白配。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的坑是 unplugin-element-plus：它默认走 dist CSS，必须显式加 useSource: true，否则会绕过你的 SCSS 编译链，直接注入静态样式。
正确写法示例：
AutoImport({ resolvers: [ElementPlusResolver({ importStyle: 'sass' })] })
Components({ resolvers: [ElementPlusResolver({ importStyle: 'sass' })] })
ElementPlus({ useSource: true })
!default 声明完全没反应？
!default 不是覆盖，是“首次声明才生效”。一旦变量在任何地方（哪怕 node_modules/element-plus/... 里）已被赋值，你的 !default 行就彻底被跳过，不报错、不警告。
排查步骤：
- VS Code 全局搜索
$--color-primary:，重点看node_modules下有没有提前定义 - 检查
vite.config.ts中css.preprocessorOptions.sass.additionalData是否注入了同名变量——它比你项目里的@use更早执行 - 别在同一个文件里先写
$--color-primary: #007bff;，再写$--color-primary: #06b0b2 !default;（语法合法但无效） - SCSS 变量不能直接用于 CSS 自定义属性：
--el-color-primary: $--color-primary;是错的；必须插值：--el-color-primary: #{$--color-primary};
真正难调试的点，往往不是你写的那行代码，而是构建流程里多个环节悄悄定义了同名变量——additionalData、UI 库自动 import、甚至 uni-app 的 uni.scss 加载机制，三者叠加后，你的 !default 可能连“第一次见到”都排不上队。
