根本原因是加载顺序和作用域隔离：:root变量仅在定义它的CSS文件内生效，且必须在使用前被解析；跨文件需将变量集中于独立variables.css并作为首个<link>引入。
为什么 :root 定义的 CSS 变量在其他文件里用不了
根本原因不是语法错，而是加载顺序和作用域隔离问题。CSS 文件之间没有“导入”概念，:root 里的变量只在当前样式表生效，且必须在使用它的规则之前被浏览器解析到。
常见错误现象：color: var(--primary-color); 渲染成初始值（如 inherit），DevTools 里显示 var(--primary-color) is not defined；或者变量值是 unset，但没报错——其实是 fallback 被用了。
- HTML 中
<link>的顺序必须是：先加载定义变量的 CSS，再加载使用变量的 CSS - 不能指望
@import在末尾加载变量文件——它会阻塞后续规则，且部分构建工具（如 Webpack 的 css-loader）默认不支持或需额外配置 - 如果用
<style>标签内联定义:root，它只对同个<style>块及之后的样式有效，跨<style>不行
怎么让多个 CSS 文件共享同一套 :root 变量
最稳妥的做法是把变量集中声明在一个独立文件（比如 variables.css），并确保它作为第一个 <link> 加载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML
<head>最顶部放：<link rel="stylesheet" href="css/variables.css"> - 所有其他 CSS 文件（
main.css、components.css等）都放在它后面 -
variables.css内容只需写：:root { --primary-color: #007bff; --spacing-md: 1rem; }不要加@charset或空规则干扰解析 - 避免在 JS 里动态写
document.documentElement.style.setProperty()后再引入样式——此时样式已解析完毕，变量不可见
用 @import 引入变量文件可靠吗
不可靠，尤其在线上环境。虽然语法合法，但 @import 是同步阻塞加载，且浏览器必须逐层解析，容易导致 FOUC 或变量未就绪。
更麻烦的是构建阶段：Vite 默认支持 @import 提升（hoist），但 Webpack 需开启 css-loader 的 importLoaders 和 esModule 选项；PostCSS 插件如 postcss-import 才真正处理路径解析。
- 如果非要用
@import，必须写在每个 CSS 文件的最开头，且路径相对主文件（不是 HTML） -
@import 'variables.css';—— 这种写法在无构建工具时可能 404，因为路径基于当前 CSS 文件位置 - 现代项目优先走构建时合并（如 Sass 的
@use/@forward，或 PostCSS +postcss-import），而不是运行时@import
构建工具里怎么安全复用 CSS 变量
关键是让变量声明提前注入到最终生成的 CSS 开头，而不是靠文件顺序拼运气。
不同场景的处理方式：
- Vite：直接在
main.css顶部用@import './variables.css';，Vite 默认启用postcss-import，能正确提升并去重 - Webpack + css-loader：需配置
options.modules.exportLocalsConvention: 'camelCase'并配合postcss-loader和postcss-import - Sass/SCSS：改用
@use 'variables' as *;，变量自动进入全局作用域，编译后仍保留在 CSS 的:root块中 - 纯 CSS + 构建流程：用
postcss-custom-properties插件做变量编译（适合需要降级到 IE 的项目），但注意它会把var(--x)替换为静态值，失去运行时灵活性
变量名冲突其实比想象中少——CSS 自定义属性天然支持继承和层叠，子元素可以覆盖父级定义，只要不滥用 !important 就不会意外污染。
