变量“丢失”实为作用域、加载时机或组件复用逻辑未对齐：Vue/React中scoped样式使:root无效；Tauri中绝对路径导致CSS加载失败；异步路由下变量文件未优先加载。
不是变量“丢了”，是作用域、加载时机或组件复用逻辑没对齐——尤其在 Vue/React 单页应用或 Tauri 桌面应用中，这种偶发失效基本能锁定在这三类场景里。
Vue/React 中 scoped 样式导致 :root 变量无效
<style scoped> 会隔离样式作用域，而 :root 是全局节点，根本不在 scoped 范围内。你在 scoped 块里写 :root { --color: red; }，浏览器直接忽略，不报错也不生效。
- 所有主题变量必须定义在非
scoped的<style>块中，或集中放在src/assets/styles/vars.css并在入口文件（如main.js）里显式import - 避免在多个组件的 scoped 样式里各自定义同名变量——它们互不感知，跳转后旧值残留、新值未覆盖，看起来像“丢失”
- 检查 DevTools 的 Elements 面板：展开
<html>元素，看Computed里--color是否显示为invalid；若是，优先查是否拼错名、是否未声明、或是否被 scoped 隔离
Tauri 中用绝对路径跳转导致 CSS 文件加载失败
Tauri 应用通过 <a href="/login.html"> 这类以 / 开头的路径跳转时，浏览器会基于 file:/// 或本地服务根目录解析，而非项目结构中的 src/。结果就是 href="styles.css" 被算成 file:///styles.css，404，所有样式（含变量定义）全丢。
- 一律改用相对路径：
<a href="../index.html">或<a href="./index.html">，根据实际目录深度调整 - 不要硬编码
/src/或/dist/—— 这既不符合 Tauri 的资源分发逻辑，也破坏构建可移植性 - 打开 DevTools 的 Network 面板，过滤
css，确认变量定义文件（如vars.css）是否 200 加载，且加载顺序早于依赖它的组件
异步路由加载时变量文件未就绪
当路由组件用 component: () => import('./Home.vue') 动态加载时，其关联的 <style> 是随 JS chunk 异步注入的。如果变量定义在另一个 CSS 文件里，而该文件还没加载完，var(--x) 就会回退到浏览器默认值或 fallback（若支持），造成短暂“丢失”感。
立即学习“前端免费学习笔记（深入）”；
- 确保变量文件（如
vars.css）被主入口（main.js或App.vue）主动import，而不是靠组件按需引入 - 禁止把变量定义分散在多个组件的
<style>块里——它们彼此隔离，无法形成统一上下文 - 若必须动态切换主题，用 class 控制（如
<body class="theme-dark">），配合.theme-dark :root { --text: white; }，别用 JS 直接改document.documentElement.style
真正难排查的从来不是变量怎么写，而是谁该负责定义终端值——把变量当配置项，而非计算表达式；把加载顺序当契约，而非巧合。
