根本原因是VSCode CSS语言服务索引机制局限：仅扫描当前打开的.css文件，且只识别顶层（如:root）静态声明的变量；@media或选择器内局部声明、跨文件引用（需规范@import且文件在工作区根目录）、带查询参数路径、语法错误均导致索引失败。
CSS变量（--xxx）在VSCode里不被识别，根本原因不是语法不支持，而是编辑器没“看到”定义位置——它压根不知道--primary-color在哪声明过。
为什么var(--xxx)没补全、跳转失效
VSCode的CSS语言服务本身能解析var(--xxx)，但智能提示和Ctrl+Click跳转依赖“索引”。它只扫描当前打开的.css文件，且只认静态、顶层作用域的定义：
-
:root里定义的--color会被索引；@media块内或.class { --size: 12px }这种局部声明不会被收录 - 跨文件引用必须靠
@import，且被导入的文件得在VSCode工作区根目录下（dist/、build/默认被跳过） -
@import 'vars.css?v=1'这种带查询参数的路径，VSCode直接忽略——它不走网络，只做本地文件匹配 - 如果
variables.css里有语法错误（比如漏了}），整个文件静默失效，不报错也不索引
为什么style={{"--bg": "red"}}在React里报红
这是TypeScript类型检查的问题，不是VSCode不认CSS变量。React的style属性类型是CSSProperties，而--bg不是标准CSS属性名，TS会直接拒绝：
- 绕过方法：用
as any或as CSSProperties & Record<string, string> - 更稳妥的是改用
className配合外部CSS文件定义变量，让样式逻辑和JS分离 - 别指望插件自动补全JSX里的
--xxx，目前没有主流插件做这件事
怎么让VSCode真正“看见”你的CSS变量
关键不是装更多插件，而是控制文件可见性与结构：
立即学习“前端免费学习笔记（深入）”；
- 把所有变量定义统一放在
src/variables.css或src/styles/vars.css，确保路径不含../、不藏在node_modules或构建产物目录里 - 在
.vscode/settings.json中显式放开扫描范围："html-css-class-completion.includeGlobPattern": ["**/*.css", "**/*.scss"] - 确认HTML文件右下角语言模式是
html（不是plaintext），否则bradlc.vscode-html-css不干活 - 禁用所有非必要的CSS格式化插件——多个插件同时监听
.css文件，容易互相覆盖索引结果
最常被忽略的一点：VSCode不会主动重载已关闭的CSS文件索引。哪怕你改了variables.css，只要它没在编辑器标签页里打开过，就不会被重新分析。打开一次再关掉，索引才更新。
