CSS变量必须在:root中定义才能被var()使用，variables.scss默认只定义Sass变量（$xxx），需手动添加:root块并确保其被正确import和编译。
CSS 变量必须定义在 :root 作用域下才能全局生效，variables.scss 本身不自动注入 :root —— 这是 Ionic 项目里最常被忽略的前提。
为什么改了 variables.scss 但 var(--primary-color) 不生效
因为 Ionic 的 variables.scss 默认只用于 Sass 变量（如 $primary-color），不是 CSS 自定义属性。它不会生成 --primary-color 这类 CSS 变量，除非你手动加 :root { } 块。
- 检查你的
src/theme/variables.scss是否包含类似:root { --primary-color: #3498db; }的写法 —— 没有就只是 Sass 变量，仅在 Sass 编译期起作用 - 如果你用的是 Ionic 4+，官方推荐把 CSS 变量统一写在
:root中，而不是依赖 Sass 变量映射 - 注意：Sass 变量（
$xxx）和 CSS 变量（--xxx）完全独立，不能互相调用（var(--x)不能读取$x）
如何正确在 variables.scss 中定义可被 var() 使用的全局 CSS 变量
直接在 variables.scss 文件末尾或单独区块中写 :root，不要嵌套、不要加 !important，确保它被最终输出到 CSS 中。
- 推荐写法：
:root { --primary-color: #3498db; --text-color: #333; --bg-color: #f5f5f5; } - 避免写成
.my-theme :root { ... }—— 这会限制作用域，失去“全局”意义 - 如果项目用了多个主题（light/dark），建议用类名切换 +
:root覆盖，例如：.dark-theme :root { --bg-color: #121212; --text-color: #fff; } - 记得在
app.scss或主样式入口中@import "./variables.scss"，否则不会参与编译
variables.scss 和 app.scss 的加载顺序与覆盖规则
app.scss 的优先级高于 variables.scss，且它的 CSS 规则会后执行 —— 这意味着你在 app.scss 里重写 :root，会覆盖 variables.scss 里的同名变量。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：在
variables.scss定义--bg-color，又在app.scss里写:root { --bg-color: red; }→ 后者生效 - 主题切换时，别用多个
:root并列定义，而应通过类名控制，比如.light-theme :root/.dark-theme :root - 构建后检查浏览器开发者工具的
Computed面板，看--xxx最终值来自哪个文件、是否被标记为invalid（比如颜色写成--color: none）
真正容易出问题的地方，是以为改了 variables.scss 就等于改了 CSS 变量 —— 实际上它默认只服务 Sass 编译流程；要让 var(--x) 可用，必须显式写 :root，且确保该文件被正确 import 并参与最终 CSS 输出。
