@import 不适合管理大型项目核心变量，因其同步阻塞加载、无法被预处理器识别变量作用域，导致变量不可复用、覆盖混乱及构建问题。
为什么 @import 不适合管理大型项目的核心变量
因为 @import 是同步阻塞加载，且无法被 CSS 预处理器（如 Sass/Less）的变量作用域机制识别——你在 @import 进来的 CSS 文件里定义的 :root 变量，其他文件用不到；而预处理器的 @import（已废弃）或 @use 又不支持纯 CSS 文件。
常见错误现象：Property --primary-color is unknown，或者变量在部分组件中生效、部分失效；构建后变量被重复注入、覆盖顺序混乱。
-
@import在 CSS 中是运行时行为，浏览器必须下载并解析完被引入文件后才继续，拖慢渲染 - Sass 的
@import "vars"会把内容直接嵌入，但无法复用同一份 CSS 变量供 JS 或 :root 查询 - PostCSS 插件（如
postcss-custom-properties）默认不处理跨@import的变量引用
真正能复用的变量方案：CSS 自定义属性 + 构建时注入
核心思路：把变量集中写在单一 :root 块中，通过构建工具（Vite/Webpack/PostCSS）确保它最先被加载，其他 CSS 文件只消费，不定义。
使用场景：需要 JS 动态读写（getComputedStyle(document.documentElement).getPropertyValue('--primary-color')）、暗色模式切换、设计系统主题切换。
立即学习“前端免费学习笔记（深入）”；
- 路径统一为
src/styles/variables.css，只含:root和媒体查询变体，不含任何选择器 - Vite 项目在
vite.config.ts中用css.preprocessorOptions.scss.additionalData注入 SCSS 变量（若用 Sass） - 纯 CSS 项目，在入口
main.css顶部用@import './variables.css';—— 注意：这是唯一安全的@import用法，且必须是第一行
SCSS/Less 用户别混用 @import 和 CSS @import
预处理器的 @import（Sass）或 @import (less) 是编译时拼接，和 CSS 原生 @import 完全无关。混用会导致变量丢失、重复输出或构建失败。
错误示例：@import 'theme.css'; 写在 _vars.scss 里 → 编译报错或静默忽略。
- Sass 推荐改用
@use 'variables' as *;（v1.23+），变量自动全局可用 - Less 用
@import (reference) 'variables.less';防止重复输出，再用.mixin()或直接引用@primary-color - 如果必须对接 CSS 变量，用 JS 注入：
document.documentElement.style.setProperty('--primary-color', '#007bff');
多人协作时变量命名与覆盖的硬约束
没有命名空间的 CSS 变量极易冲突，尤其当多个团队维护不同模块时。一个 --color 可能在按钮组件、图表库、表单框架里各自定义。
性能影响：变量名越短，JS 查询越快；但太短又难追溯来源。折中方案是前缀 + 语义层级。
- 强制前缀，如
--myapp-color-primary、--myapp-spacing-md，禁止裸名--color - 暗色模式变量必须成对出现：
--myapp-color-bg: #fff; --myapp-color-bg-dark: #1a1a1a;，而非靠 JS 切换 class 后重写全部 - 不要在组件级 CSS 里用
:root覆盖变量——改用[data-theme="dark"] :root统一控制
最常被忽略的一点：CSS 变量的继承性不是“定义即生效”，而是“计算时取值”。如果某处 div 上写了 style="--color: red"，子元素用 color: var(--color) 才会红；但父级没设该变量，子元素就 fallback 到初始值。这导致调试时看似“变量没传下去”，其实是链路上某一级漏了声明。
