link标签不支持变量，仅加载css文件；跨页面样式统一需将:root变量集中定义在variables.css中，用link引入并确保其在其他样式表之前加载。
link 标签本身不支持变量、不解析 CSS 变量（:root 里的 --color-primary 等），它只负责加载一个纯文本 CSS 文件。
你真正想做的，大概是这三件事中的一件：
为什么 link 标签无法“引用变量”
link 是资源加载机制，不是编程语言语法。它把 href 指向的文件整个下载下来，交给浏览器 CSS 引擎去解析——而变量是否生效，完全取决于那个 CSS 文件里有没有定义、有没有被正确使用，和 link 无关。
如何让多个页面共用同一套 CSS 变量
变量定义必须写在 CSS 文件里（通常放在 :root 块中），然后通过 link 正常引入该文件：
- 在
/css/variables.css中写：:root { --text-color: #333; --bg-main: #fff; } - 所有 HTML 页面都加：
<link rel="stylesheet" href="/css/variables.css"> - 再引入业务样式：
<link rel="stylesheet" href="/css/layout.css">（里面可直接用color: var(--text-color)） - 确保
variables.css在其他样式表 之前 加载，否则变量会未定义
常见失败原因：变量写了但没生效
这不是 link 的问题，而是变量作用域或加载顺序出错：
-
variables.css放在了layout.css后面 → 变量定义晚于使用，var(--x)回退到初始值 - CSS 文件里漏了
:root，直接写--x: red→ 不是有效声明，浏览器忽略 - 路径写错，比如
href="css/variables.css"实际文件在/styles/variables.css→ 控制台 404，变量根本没加载 - 服务器返回的 Content-Type 不是
text/css→ 浏览器拒解析，变量当然不生效（Nginx/Apache 配置需检查）
不要尝试用 link 的 rel 或 href “注入”变量
这些写法全无效：
-
<link rel="stylesheet" href="theme.css?color=blue">→ 查询参数对 CSS 解析无影响 -
<link rel="stylesheet" href="data:text/css;utf8,:root%7B--c:red%7D">→ 大部分浏览器不支持 data URL 作为样式表（尤其 Safari） -
<link rel="stylevars" href="config.json">→rel="stylevars"是非法值，浏览器静默忽略
link 的加载顺序，不是靠 link 标签本身有什么“变量接口”。最容易被忽略的一点：CSS 变量不跨 link 生效——它们只在定义它的样式表及其后续加载的样式表中可用，且依赖严格的顺序。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
