CSS Modules不处理CSS变量作用域，:root中定义的--var仍是全局的；真正局部化需将变量声明在组件根选择器（如.button-root）上，依赖CSS继承机制实现作用域隔离。
为什么不能在 CSS Modules 里直接用 :root 定义变量
因为 CSS Modules 的核心机制是**类名局部化**，它不接管或重写 CSS 自定义属性的作用域规则。你在 :root 里声明的 --primary-color 仍是全局变量，哪怕它写在 Button.module.css 文件里——构建工具不会把它“模块化”，浏览器照样全文档可读。
常见错误是以为文件名带 .module.css 就自动隔离了变量，结果改一个按钮主题色，整个页面的 var(--primary-color) 全跟着变。
-
:root是 DOM 树顶层，和文件路径无关；CSS Modules 不修改 CSSOM 的作用域逻辑 - Webpack/Vite 的
css-loader只处理类名哈希，对--xxx视而不见 - 真正想局部化变量，得把变量声明绑定到组件容器元素上，比如
.button-root或:host
如何在组件级实现真正的变量局部作用域
关键不是“在哪写变量”，而是“让变量生效的范围可控”。必须把变量定义在组件根元素的选择器里，并确保子元素通过继承链访问它。
以 React + CSS Modules 为例：
立即学习“前端免费学习笔记（深入）”；
/* Button.module.css */
.button-root {
--button-bg: #007bff;
--button-text: white;
--button-border-radius: 4px;
}
<p>.button-root:hover {
--button-bg: #0056b3;
}</p><p>.button {
background-color: var(--button-bg);
color: var(--button-text);
border-radius: var(--button-border-radius);
}
- 所有变量都挂在
.button-root上，子元素（如.button）能自然继承 - 多个
.button-root实例互不影响，各自维护自己的--button-bg - 避免用
!important覆盖变量值——它会破坏继承，且 DevTools 里看不出来源
和 Sass/Less 变量混用时容易踩的坑
Sass 的 $primary 是编译期静态值，CSS 变量 --primary 是运行时动态属性，二者不能直接替换或嵌套。常见误用：
- 在
.module.scss里写background: $primary→ 这只是把 Sass 值编译成固定色值，失去运行时切换能力 - 试图用
#{--primary}拼接 CSS 变量名 → Sass 不支持反向解析 CSS 变量 - 用 Sass 函数生成
:root { --color: #{$primary} }→ 这仍属全局，没解决组件隔离问题
正确做法是：Sass 管**主题配置生成**（如从 JSON 主题文件生成对应 CSS 变量块），CSS 变量管**运行时作用域与继承**。
调试时怎么确认变量是否真被继承下来
别只看 Styles 面板里的 var(--x) 是否高亮，要验证它实际取到了什么值。
在 Chrome DevTools 控制台执行：
const btn = document.querySelector('.button');
getComputedStyle(btn).getPropertyValue('--button-bg');
// 返回 '' 表示没继承到，或返回 '#007bff' 表示正常
- 如果返回空字符串，检查父级元素是否真有
--button-bg声明，且没被更具体的规则覆盖 - 用 Computed 面板展开
background-color，点右侧小箭头可跳转到最终生效的var()定义处 - 注意伪元素（如
::before）能继承宿主变量，但content: var(--x)不支持拼接字符串
组件级变量局部化的难点不在声明，而在确保每一层 DOM 节点都处在正确的继承链上——漏掉一层容器声明，子元素就断连。
