主题变量失效是因为sass编译时变量未进入作用域：@use创建私有作用域，二次封装中重定义仅影响局部副本，而组件库自身样式已提前编译；真正生效需在组件样式导入前、全局作用域中声明变量，且禁用预编译css。
直接结论：主题变量失效不是因为你写错了值，而是 Sass 编译时变量根本没进作用域——二次封装后，组件库的样式文件被提前编译，你的重定义被跳过。
为什么@use封装后$primary-color改了也不生效
Sass 的 @use 创建私有作用域，每个 @use "xxx" 都是独立副本。你在一个封装组件里 @use "antd/scss" 后改 $primary-color，只改了那个局部副本；而 antd 自身的按钮、输入框等组件在它自己的模块里用的是另一份未被修改的 $primary-color。
- 典型翻车点：写了个
MyButton.scss，@use "antd/scss/components/button"，然后在下面写$primary-color: #ff6b35;—— 这行完全无效，因为 button 组件的样式早已在它自己的模块中编译完毕 - 真正起效的位置必须在 antd 所有组件样式 之前，且是全局作用域（即不能嵌套在
@use块内） - 如果你用
@forward暴露变量，下游@use时仍需显式重定义，但重定义语句必须出现在@forward导入之后、任何组件样式@use之前
正确覆盖路径：入口级变量注入 + 禁用预编译 CSS
Ant Design、Element Plus 等主流库的 SCSS 主题机制，只认「在 @import 或 @use 组件样式前，已声明的变量」。二次封装无法绕过这个链路。
- 新建
src/styles/theme.scss，内容严格按顺序：@import "antd/scss/themes/default";<br>$primary-color: #ff6b35;<br>$border-radius-base: 4px;<br>@import "antd/scss/index";
- 在项目最顶层（如
src/index.tsx或main.js）第一行 import 它：import './styles/theme.scss'; - 删掉所有
import 'antd/dist/antd.css'—— 它和上面的 SCSS 链路互斥，留着必失效 - 确保构建工具（Vite/Webpack）没通过
additionalData或sass-resources-loader重复注入变量，否则会触发多次赋值，而 Sass 只认第一次
::v-deep 或 :global 不是主题方案，只是临时补丁
你在封装组件的 <style lang="scss" scoped></style> 里写 ::v-deep .ant-btn 改背景色，能生效，但这和主题无关——它不改变 $primary-color 的值，也不影响其他组件（比如 AntdInput），更不会生成对应的新 token 或衍生色（如 $primary-color-hover）。
- 适用场景仅限：微调某个特定组件的某条规则，且确认该组件 DOM 结构稳定（不随版本升级变化 class 名）
- 禁用
as *：别写@use "theme" as *;，它会把所有变量拖进全局，破坏封装性，也容易被后续同名变量覆盖 - 用
@use "theme" as theme;+theme.$primary-color显式引用，避免歧义，也方便 IDE 跳转
容易被忽略的“伪覆盖”：CSS 权重压不过组件库原生选择器
你以为变量生效了，但 DevTools 里看到按钮还是默认蓝——可能 .ant-btn-primary.ant-btn 的特异性比你生成的 .my-button 高，或者 antd 用了 :where() 降权后，你的规则又没加足够权重。
- 检查「Computed」面板，确认最终生效的
background-color是来自你编译出的 CSS，而不是antd.css - 如果用了 Ant Design 5.x 的
ConfigProvider，它默认开启:where()封装，此时你需要<styleprovider hashpriority="high"></styleprovider>恢复正常权重 - 不要依赖
!important强行覆盖——它会让后续所有主题切换、暗色模式适配全部失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
