根本原因是浏览器忽略中的:root声明，因vue为选择器添加[data-v-xxx]属性后，:root无法匹配无该属性的节点；正确定义须用非scoped方式全局注入，如在index.html或main.js中引入含:root的css文件。
为什么 :root 在 <style scoped></style> 里不生效
根本原因是：浏览器会直接忽略 <style scoped></style> 中的 :root 声明。Vue 的 scoped 机制会给所有选择器自动加上属性哈希（如 [data-v-abc123]），但 :root 是全局伪类，无法匹配任何带哈希的元素——它只作用于 根节点，而根节点没有那个 data 属性。
常见错误写法：
<style scoped>
:root { --primary-color: #409eff; }
</style>
这段代码在 DevTools 的 Styles 面板里根本不会出现，Network 里也看不到对应规则被注入。
- 别指望它能定义全局变量
- 别把它和组件内
var(--primary-color)混用——后者会 fallback 到浏览器默认值或空字符串 - 即使你用
::v-deep :root或/deep/ :root也没用，因为 scoped 不允许穿透到根节点
如何正确定义可跨路由使用的 CSS 变量
必须脱离 scoped 上下文，让变量声明进入全局样式流。有且只有两种可靠方式：
- 在
public/index.html的中直接写<style>:root { --x: val; }</style>，最简单、最稳定 - 在入口文件（如
main.js或App.vue的非 scoped<style></style>）中import一个纯 CSS 文件，比如import '@/styles/variables.css'，且该文件不能带scoped
注意：如果用 Vite，确保这个 variables.css 不是通过某个路由组件异步 import 的——否则变量可能晚于组件渲染，导致首次跳转时 var(--x) 解析失败。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
示例（推荐）：
// src/styles/variables.css
:root {
--primary-color: #409eff;
--spacing-sm: 0.5rem;
}
// main.js import './styles/variables.css' // ✅ 确保它在 new VueApp() / createApp() 之前执行
路由跳转后变量“突然失效”的真实原因
不是变量丢了，而是加载时机错位或复用残留：
-
异步路由组件加载早于变量 CSS：比如
component: () => import('./Home.vue')加载完成并渲染了，但variables.css还在 HTTP 请求队列里——此时var(--primary-color)返回空字符串，表现像“失效” -
keep-alive + JS 动态改变量：若你在某个组件的
mounted里执行document.documentElement.style.setProperty('--bg', 'red')，跳走后没清理，再回来时变量还是 red；但新页面想设 blue，却因未覆盖而失效 -
多个组件各自定义同名变量：A 页面 import 了
a.css（含:root{--color:#f00}），B 页面 import 了b.css（含:root{--color:#00f}），但构建后它们被合并或覆盖，最终只留一个
验证方法：打开 Network 面板，过滤 .css，看 variables.css 是否在第一个 HTML 请求后立即加载并返回 200，且时间戳早于路由组件 chunk。
避免踩坑的关键动作
真正管用的操作就这几条，别绕弯：
- 删掉所有
<style scoped></style>里的:root，一个都不要留 - 把变量统一收口到单个非 scoped CSS 文件，并从
main.js直接 import - 禁用 JS 动态操作
document.documentElement.style，除非你明确写了beforeRouteLeave清理逻辑 - 检查构建产物：打开 dist/index.html，搜
:root，确认它出现在的<style></style>或外链<link>里，而不是某个组件的 scoped style 标签中
最易被忽略的是：变量文件必须比任何依赖它的组件更早加载——它不是“配角”，是整个样式系统的基石，得放在加载链最前端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
