优先查设计系统主题配置入口，未开放变量时注入:root并局部引用；禁用!important覆盖，改用变量回退或specificity提升；热更新需状态管理联动，非构建工具职责。
直接改 CSS 变量还是覆盖选择器？
多数设计系统（如 Ant Design、Chakra UI）用 CSS custom properties 暴露主题接口，但不是所有属性都开放。想加一个按钮的 --btn-shadow-hover，却发现它根本没定义——这时候硬写 .btn:hover { box-shadow: ... } 最快，但会绕过设计系统主题切换逻辑。
推荐做法：优先查设计系统文档里有没有 :root 或 theme 配置入口；没有就往根节点注入新变量，再在组件局部用 var(--btn-shadow-hover) 引用。别在组件内部直接写死值，否则暗色模式或换肤时会失效。
- 检查是否已有类似变量：
getComputedStyle(document.documentElement).getPropertyValue('--btn-shadow') - 新增变量必须挂载到
:root或高阶 wrapper 元素上，不能只作用于某个组件 scoped style - 若用 CSS-in-JS（如 Emotion），确保变量注入时机早于组件渲染，否则首次加载会闪动
PostCSS 插件能自动补全缺失变量吗？
不能。PostCSS 是构建时工具，运行时变量不存在，插件没法“猜”你想要什么阴影或圆角。有人试过用 postcss-custom-properties 回填默认值，但仅限静态已知变量，对运行时动态主题完全无效。
真正有用的是构建后处理：比如用 postcss-apply 把 @apply --btn-primary 编译成完整声明，但它要求你先手动定义好 --btn-primary 的值。所以重点不在“自动补全”，而在“提前约定变量命名规范”。
- 避免用
--my-btn-shadow这种私有前缀，统一走设计系统已有的命名风格（如--ant-primary-shadow） - PostCSS 不处理 JS 动态设置的变量，
document.documentElement.style.setProperty('--x', 'y')完全绕过它 - 如果项目用 Vite，可写一个简单的
transformhook，在.css文件中检测未定义变量并报 warning
为什么用 !important 覆盖样式后主题切换失效？
因为设计系统通常靠 JS 动态切换 data-theme="dark" 并批量重设 :root 变量，而 !important 声明权重高于所有变量计算结果。哪怕你写了 --btn-bg: red，只要有个 background: blue !important，red 就永远不生效。
更隐蔽的问题是：某些 CSS-in-JS 库（如 Styled Components）生成的 class 名带哈希，!important 覆盖后，下次构建 class 名变了，样式就丢了。
- 用
specificity替代!important：比如把.my-btn改成body.light .my-btn提升权重 - 若必须覆盖，优先用变量回退机制：
background: var(--btn-bg, #007bff)，而不是写死颜色 - 检查浏览器 DevTools 的 Computed 标签页，看最终生效的 background 来源——常发现是某层父容器的
all: unset意外清掉了变量
Vite / Webpack 中如何让客制化 CSS 变量热更新？
默认不会。Vite 的 CSS HMR 只监听 .css 文件内容变化，但如果你在 JS 里调用 document.documentElement.style.setProperty 设置变量，改了 JS 不会触发 CSS 热更新，页面也不会重绘。
真正要热更新的是“变量值变化 → 组件响应式重绘”，这得靠状态管理联动。比如用 useTheme Hook 监听主题变更，再用 useEffect 同步写入 :root。构建工具本身不负责这个。
- Vite 用户可在
vite.config.ts中配置css.preprocessorOptions.postcss加载自定义插件，但仅限编译期 - Webpack 用户注意
style-loader的injectType: 'singletonStyleTag'模式下，多次 HMR 可能残留旧 style 标签 - 最简方案：把客制变量全收进一个
theme.css文件，用@import引入主样式，这样改它就能触发完整 HMR
变量名冲突和作用域泄漏比想象中更常见。比如两个团队分别加了 --spacing-xs，但值不同，又都没加命名空间，最后谁打包在后面谁赢。这事没法靠工具自动解决，只能靠约定和 Code Review 卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
