根本原因是CSS文件未加载成功：先查Network面板中.css请求是否返回200状态码，若为404、403、0或blocked，则路径错误、权限受限、被拦截或协议不匹配；再确认link标签rel="stylesheet"正确、href路径准确（区分大小写）、Content-Type为text/css，且变量定义在有效作用域（如:root）并确保加载顺序正确。
外部样式表中定义的 CSS 变量（--my-color）无法使用，**根本原因不是变量语法错，而是该 CSS 文件压根没加载成功**。只要 link 标签失效、路径 404、MIME 类型错误或作用域未覆盖，var(--my-color) 就会退化为初始值或完全不生效——浏览器甚至不会报“变量未定义”，因为它连变量定义那行代码都没读到。
检查 Network 面板里 .css 请求是否返回 200
这是第一道也是最关键的关卡。打开开发者工具 → Network → 刷新 → 筛选 .css → 找到你引入变量文件的那条请求：
- 状态码是
404：路径写错了，比如href="css/vars.css"但实际文件在assets/css/vars.css - 状态码是
403：服务器拒绝访问，常见于本地双击打开 HTML（file://协议），或 Nginx/Apache 未开放该目录 - 状态码是
0或(blocked)：可能是广告拦截器屏蔽了该 URL，或 CSP 策略禁止加载内联/外部样式 - URL 显示为
http://localhost:3000/css/vars.css但你本地用的是python -m http.server：端口不匹配，请求发到了空服务上
确认 link 标签写法和路径解析是否准确
link 标签哪怕漏一个字符，浏览器都会跳过加载。重点核对以下几处：
- 必须有
rel="stylesheet"，写成rel="style"、rel="css"或直接省略，浏览器一律忽略 -
href值不能含中文引号、全角空格或多余换行；路径中的.和..是以当前 HTML 文件位置为基准，不是项目根目录 - Linux 服务器严格区分大小写：
Vars.css≠vars.css；Windows 下可能“凑合能用”，部署后立刻失效 - 避免在
href中混用协议：HTTP 页面里写https://cdn.example.com/vars.css会触发混合内容警告并被拦截
验证服务器是否返回 Content-Type: text/css
即使文件存在、路径正确、状态码 200，如果响应头里 Content-Type 不是 text/css，现代浏览器会直接拒解析。点击 Network 中的 CSS 请求 → Headers → Response Headers：
立即学习“前端免费学习笔记（深入）”；
- 看到
Content-Type: text/plain或application/octet-stream？说明服务器没配 MIME 类型 - 本地用
python -m http.server时默认不设text/css，需换用live-server或http-server - Nginx 需确认
types块包含text/css css;；Apache 要确保mime_module已启用且.css关联正确
变量定义是否落在有效作用域且未被覆盖
变量加载成功 ≠ 能用。还需确认定义位置和调用上下文是否匹配：
- 变量必须在使用前定义，且作用域要能覆盖目标元素。例如只在
.header { --color: red; }里定义，那.footer里var(--color)就无效 - 推荐统一在
:root中定义：:root { --primary: #007bff; }，这样全局可用 - 注意 CSS 加载顺序：如果变量定义在
vars.css，而样式规则在main.css，那main.css必须在vars.css之后引入，否则var()查不到 - 不要在外部 CSS 文件里写
<style></style>标签——它只用于 HTML 内联样式，放进去会导致整个文件解析失败
真正卡住人的地方，往往不是 var() 怎么写，而是你根本没意识到变量所在的那个 .css 文件，从头到尾就没进过浏览器的样式引擎。Network 面板里那个红色的 404，比任何控制台警告都更值得先盯三秒。
