不能直接在css modules中安全使用全局css变量，必须确保变量已在:root中定义且通过独立css文件（如tokens.css）在.module.css加载前被浏览器解析并注入全局作用域，否则var(--x)将静默降级为初始值。
全局CSS变量在CSS Modules里能直接用吗
能，但必须确保它已在:root中定义且被全局引入——CSS Modules不干涉var(--xxx)的解析，它只处理类名作用域。常见错误是：变量文件没在入口（如main.ts）里import，或者写在某个.module.css内部却忘了加:root包裹，导致var(--brand-primary)计算为invalid，浏览器静默降级为初始值（比如color: var(--brand-primary)变成color: inherit）。
为什么:global(.btn) { color: var(--brand-primary); }是错的
这不是语法错误，而是逻辑陷阱：:global()只影响选择器的作用域，不影响属性值的解析。但问题出在：如果--brand-primary没在:root定义，或被后续样式覆盖，这个color就失效了；更危险的是，有人误以为:global()能让变量“透出”到其他模块——其实变量本身已是全局运行时机制，根本不需要:global()加持。
-
:global()只该用于类名、ID、标签等选择器脱离局部化，不是变量的“开关” - 变量引用永远走CSS级联规则，和是否
:global无关 - 混用
:global(.wrapper) { --bg: red; }会导致该变量只在.wrapper内有效，违背“全局变量”本意
动态主题切换时，CSS Modules组件怎么响应--color-mode
CSS Modules组件天然响应CSS自定义属性变化，无需额外JS绑定——只要变量在:root上，且组件样式用了var(--color-mode)，切换document.documentElement.style.setProperty('--color-mode', 'dark')后，所有相关样式会自动重绘。
- 避免在
.module.css里重复定义:root { --color-mode: light; }——这会覆盖全局初始值，且不同模块间可能冲突 - 不要用
composes去“继承”变量值，composes只组合类名，不传递变量 - 若需条件性应用变量（如
background: var(--bg-${theme})），这是非法的——CSS不支持字符串拼接变量名，必须预定义--bg-light和--bg-dark两个变量
SCSS变量和CSS自定义属性能混用吗
能，但必须分清阶段：SCSS变量（如$primary）只能在构建时注入到CSS自定义属性声明里，不能在运行时读取或修改。
正确写法：
:root {
--brand-primary: #{$primary};
--brand-secondary: #{$secondary};
}
错误写法：
.button {
background: $primary; /* 编译后是静态值，失去运行时能力 */
color: var(--brand-primary); /* 这行有效，但和上面的$primary无关联 */
}
关键点：所有需要运行时切换的值，必须最终落在var(--xxx)调用链上；SCSS只是帮你把设计系统数值“抄进”CSS变量定义里，抄完就退场。
最容易被忽略的是变量作用域层级——:root里定义的--x对所有元素有效，但如果在某个组件.module.css里写了.container { --x: blue; }，那这个--x只在.container及其后代生效，外部组件读不到。真要跨组件通信，必须守住:root这一道线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
