useCssVars 是 Vue 3.4+ 编译器自动生成的内部函数，无需手动 import 或调用；仅在 <style module> 中配合 v-bind() 使用才生效，变量需为响应式且作用域限于当前组件。
Vue 3.4+ 中 useCssVars 不是手动调用的 Hook，而是编译器自动生成的内部函数——你**不需要显式 import 或调用它**。它的作用是在组件 setup 阶段自动将响应式变量注入到 CSS 变量中，前提是必须配合 <style module> 和 v-bind() 使用。
关键前提：必须用 <style module>
只有带 module 属性的 style 标签才启用 v-bind 响应式绑定机制。普通 <style> 或 <style scoped> 中写 v-bind(color) 会被忽略，浏览器开发者工具里完全看不到对应 CSS 变量。
- ✅ 正确写法：
<style module> - ❌ 无效写法：
<style scoped>、<style>、<style lang="scss" module>（SCSS 不支持 v-bind，需用原生 CSS）
v-bind() 的写法和限制
在 <style module> 内部，直接在 CSS 声明块中使用 v-bind(变量名)，它会被编译成带哈希前缀的 CSS 自定义属性（如 --c845efc6-color），并自动挂载到组件根元素上。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 变量名必须是合法 CSS 标识符（不能以破折号开头、不能含空格或特殊符号）
- 只能出现在 {} 声明块内，不能用于选择器、@media、嵌套规则中
- 不支持表达式，只接受顶层响应式变量名：
v-bind(theme.primary)报错；需先解构：const primary = computed(() => theme.value.primary) - 值类型会自动转字符串：number → 加 px（如
16→"16px"），string 原样输出，null/undefined → 空字符串（建议设默认值避免样式断裂）
响应式变量必须是 ref / computed / reactive
v-bind() 绑定的 JS 变量必须是响应式的，否则值变化不会触发 CSS 变量更新。
立即学习“前端免费学习笔记（深入）”；
- ✅ 支持：
const color = ref('#333')、const size = computed(() => props.width + 'px')、const state = reactive({ bg: 'blue' }) - ❌ 不支持：
let color = '#333'（非响应式）、const color = 'red'（常量）
为什么子组件拿不到这些变量？
<style module> 中的 v-bind 变量作用域仅限当前组件，不会继承给子组件。这不是 bug，是设计使然。
- 父组件设置的
--xxx只影响自身及其普通 DOM 后代（非 shadow DOM） - 子组件若用了 Web Component、all: initial/unset、或未主动用
var(--xxx)读取，就无法生效 - 如需跨组件共享，应改用全局 CSS 变量（如 :root 定义）或通过 props + :style 透传
