CSS变量与CSS Modules可共存但不可混用，因前者是运行时继承机制，后者仅重命名类名；var(--x)能否生效取决于--x是否在DOM继承链上定义，与模块路径无关。
CSS变量（--my-var）和CSS Modules本身是两套机制：前者是浏览器原生运行时特性，后者是构建工具（如webpack + css-loader）实现的编译期作用域隔离。它们能共存，但不能混用同一套“变量系统”——你没法在@value里引用var(--x)，也不能把postcss-modules-values定义的@value当var()用。
为什么不能直接在 CSS Modules 里用 var(--x)？
CSS Modules 不影响 CSS 变量的作用域规则，它只重命名类名。所以var(--x)能否生效，完全取决于--x是否被定义在当前继承链上——和模块文件名、import路径无关。
-
--x必须在某个选择器内定义（比如.button-root { --x: red; }），子元素才能继承并使用var(--x) - 如果写在
:root里，所有模块都能访问，但这就失去了“局部作用域”意义 - CSS Modules 的
composes或:local语法对--x定义无影响——变量不随类名重命名而迁移
@value 和 --custom-property 别搞混
@value来自postcss-modules-values插件，是编译期静态替换；--custom-property是运行时动态值。两者语法相似，但生命周期完全不同。
-
@value primary: #007bff;→ 构建时直接替换成#007bff，最终 CSS 里没有primary痕迹 -
.btn { --btn-color: #007bff; color: var(--btn-color); }→ 浏览器运行时读取--btn-color，可被JS修改 - 不能写
@value color from "vars.css"; .btn { color: var(color); }——var()不接受@value输出的值
推荐组合：局部 CSS 变量 + CSS Modules 类名隔离
真正实用的做法，是把 CSS 变量定义在组件根选择器上，靠继承向下透传，再配合 CSS Modules 的类名哈希保证样式不冲突。
立即学习“前端免费学习笔记（深入）”；
- 在
Button.module.css里写：.button-root { --button-bg: #007bff; --button-text: white; } .button-root:hover { --button-bg: #0056b3; } .button { background-color: var(--button-bg); color: var(--button-text); } - 每个
.button-root实例独立维护自己的--button-bg，互不影响 - 避免在子元素里重复定义同名变量，否则会覆盖继承值
- 调试时打开 DevTools → Elements → 查看 computed styles，能直接看到
--button-bg当前值及其来源（哪个选择器定义的）
容易忽略的关键点
很多人卡在“变量没生效”，其实问题不在写法，而在作用域链断裂或覆盖顺序不对。
-
!important会破坏var()继承链，DevTools 里也看不到变量来源，尽量不用 - 如果父元素没定义
--x，子元素var(--x, fallback)里的fallback才生效——别指望全局兜底 - JS 动态设置
element.style.setProperty('--x', 'red')只影响该元素及其后代，不影响其他同名组件实例 - 和服务端渲染（SSR）结合时，确保变量定义在 HTML 首次渲染前已注入，否则可能闪动
