CSS变量名必须加库前缀（如--ant-primary-color）以避免多库冲突，因自定义属性是全局作用域且无隔离机制，构建时需用PostCSS注入命名空间，JS和Less/Sass中引用也须严格匹配前缀。
CSS变量名一撞就失效，根本没法靠“后加载覆盖”来博弈——因为谁先设的--primary-color，谁就可能被后面任意一个第三方库静默干掉。
为什么--primary-color这种变量名在多库环境下必炸
CSS自定义属性是全局作用域，不按文件、不按组件、不按加载顺序隔离，只看声明位置和继承链。只要两个第三方库（比如 Ant Design 和 Chakra UI）都在:root里写了--primary-color，浏览器就按文档流最后出现的那个生效——而你根本控制不了它们的注入顺序，Webpack、qiankun、甚至动态import()都可能导致结果翻车。
更麻烦的是：DevTools 的 Styles 面板只显示最终计算值，点不开源头；搜索项目也搜不到哪个node_modules里的 CSS 文件在写这个变量。
- Ant Design 的
dist/reset.css里定义了--primary-color: #1890ff - Chakra UI 的
theme.css里定义了--primary-color: #3182ce - 你的
:root里再写一次，照样会被其中某一个覆盖，且无法预测
必须给每个库的变量加app-id或lib-id前缀
不能指望库自己改，得在构建阶段做命名空间注入。核心不是“避免冲突”，而是“让冲突变得可识别、可定位、可隔离”。
立即学习“前端免费学习笔记（深入）”；
- 用 PostCSS 插件（如
postcss-prefix-vars）在构建时重写所有--*，把--primary-color变成--ant-primary-color或--chakra-primary-color - 若用 Vite，可在
vite.config.ts中配置css.postcss.plugins，对node_modules/ant-design-vue/**路径下的 CSS 单独处理 - 禁止手动在
:root里补--ant-primary-color：容易漏、难维护、JS 动态修改时还得同步两套逻辑 - JS 修改变量时，必须严格匹配前缀：
document.documentElement.style.setProperty('--ant-primary-color', '#ff6b35')，错一个连字符就无效
:root里别再塞业务变量，第三方变量更不能往里扔
把:root当全局变量池是最危险的习惯。一旦某个第三方库通过 JS 动态写document.documentElement.style，它就能瞬间污染整个页面的var(--x)消费链。
- 正确做法：只在真正需要的地方声明变量，比如
.ant-btn规则块内写--ant-btn-bg，让它天然受限于选择器作用域 - 若必须全局可用（如主题色），统一走
data-theme="ant"这类属性 + 属性选择器：[data-theme="ant"] { --ant-primary-color: #1890ff; } - 禁用所有
!important修饰的变量声明——它会让继承链断裂，var(--x, fallback)直接失效 - 检查构建产物：确认
index.html里没有多个<style>标签同时在:root下定义同名--*
Less/Sass 中引用第三方 CSS 变量时的透传陷阱
Less 编译器看到--primary-color会当成非法变量名报错或静默丢弃，绝不能直接写color: --primary-color。
- 必须用波浪号透传：
color: ~"var(--ant-primary-color)" - 不能插值：
~"var(--@{prefix}-primary-color)"❌，Less 不支持~""内部插值，得拆成两步：@prefix: "ant"; color: ~"var(--@{prefix}-primary-color)" - 别用 Less 变量桥接：
@primary-color: var(--ant-primary-color);看似省事，但 JS 改--ant-primary-color时，@primary-color不会响应——它是编译期固化值 - 所有
~"var(--*...)"必须和实际注入的前缀完全一致，拼错、少连字符、大小写混用，都会导致var()返回invalid，整条样式被浏览器忽略
最易被忽略的一点：变量前缀不是加一次就完事。它要贯穿三处——CSS 声明位置、JS setProperty 调用、以及所有 Less/Sass 中的var(--x)引用。漏掉任何一环，主题切换或样式隔离就断在看不见的地方。
