分包加载后CSS变量没生效，根本原因是link插入时机晚于样式解析，变量声明未就绪；须将变量CSS同步置于head顶部，或动态加载后监听onload再渲染。
分包加载后 CSS 变量没生效，根本不是变量“丢了”，而是加载顺序被异步打乱了——link 插入时机晚于样式规则解析，浏览器压根没看到变量定义。
为什么分包里用 var(--color) 渲染成初始值？
分包（如 Vue 的异步组件、Webpack 的 import()、Vite 的动态 import.meta.glob）默认触发异步资源加载，CSS 文件通过 link 动态插入 DOM。但此时主样式（含 var(--x) 的规则）早已解析完毕，变量声明还没来得及注入。
- DevTools 的 Computed 面板里搜
--color，显示not defined或 fallback 值（如inherit） -
getComputedStyle(el).getPropertyValue('--color')返回空字符串""，不是undefined - Network 面板能看到变量 CSS 请求成功（200），但时间戳明显晚于主样式
如何确保变量 CSS 在分包样式前加载？
不能依赖“先 import 变量文件再 import 组件”的 JS 顺序——CSS 加载是异步的，JS 执行快不代表样式已就绪。
- 把变量定义抽成独立 CSS 文件（如
css/vars.css），并在 HTML<head>最顶部用同步<link rel="stylesheet">加载 - 避免在分包内重复
@import或动态插入变量 CSS；它只应由主应用统一提供 - 若必须动态加载（如主题切换），用
document.head.appendChild(link)后监听link.onload，再触发分包渲染 - Vite 用户注意：
import.meta.glob加载的 CSS 默认不参与构建时提取，需手动配置build.rollupOptions.output.manualChunks把变量 CSS 单独拎出来
Vue / React 分包中直接写 :root { --x: red } 为什么无效？
每个分包是独立作用域，:root 声明只对当前 CSS 文件生效；而分包样式规则（如 .btn { color: var(--x) }）可能来自另一个文件，且加载更早。
立即学习“前端免费学习笔记（深入）”；
- 不要在分包的
<style>或 SCSS 中重复定义全局变量——它不会覆盖document.documentElement上的值 - 如果分包需要局部主题，改用父容器类名承接：
.theme-dark .my-comp { --text-color: #fff; }，再让组件内color: var(--text-color) - Web Components 场景下，必须显式写
:host { --x: inherit; }，否则 Shadow DOM 不继承 :root 变量
最易忽略的一点：变量文件即使加载成功，若里面混了 @charset "UTF-8"、空行或注释开头，部分构建工具（尤其是旧版 css-loader）会静默跳过解析——删掉所有非 :root 内容，只留纯变量声明，是最稳妥的底线做法。
