必须在 src/css/app.scss 的 :root 中定义 CSS 变量，确保 SSR 兼容与全局生效；避免重复引入、动态修改需用 document.documentElement.style.setProperty() 并加 process.client 判断。
Quasar 项目中不能直接在 main.js 或 boot 文件里用 JavaScript 注入 CSS 变量到 :root —— 它们必须在 CSS 层级生效，否则会被 Quasar 的 scoped 样式或 SSR 渲染打断。
把变量定义在 src/css/app.scss（或 .css）的 :root 里
这是最稳定、兼容 SSR 和所有组件的方式。Quasar 默认会加载 src/css/app.scss（若存在），且该文件在所有组件样式之前解析。
操作步骤：
- 确保
src/css/app.scss存在（没有就新建） - 在里面写：
:root { --q-primary: #42b883; --q-font-size-base: 16px; } - 重启开发服务器（热更新有时不触发 :root 变量重载）
- 在任意 Vue 组件的
<style>中直接使用：color: var(--q-primary);
注意：不要用 @import 引入变量文件再在 :root 外定义 —— CSS 变量必须在 :root 或具体选择器内声明才有效；@import 后的 :root 块仍可生效，但顺序容易错乱。
立即学习“前端免费学习笔记（深入）”；
避免在 quasar.conf.js 的 css 数组里重复添加 app.scss
Quasar 默认已自动注入 src/css/app.scss（如果存在）。如果你手动在 quasar.conf.js 的 css: ['src/css/app.scss'] 中再次添加，会导致：
- 开发时样式被加载两次（可能触发重复变量警告）
- 构建后 CSS 体积增大
- 某些变量被后加载的副本覆盖（尤其用了
!important或复杂计算时）
检查你的 quasar.conf.js，删掉显式的 src/css/app.scss 条目，只保留它默认行为即可。
动态修改变量需用 document.documentElement.style.setProperty()
运行时切换主题色、字号等，不能靠重写 :root 块，只能用 JS 设置：
document.documentElement.style.setProperty('--q-primary', '#e53935')
但要注意：
- SSR 环境下
document不存在，必须包在if (process.client) { ... }里 - Quasar 的
dark模式会自动切data-theme="dark"，建议配合属性选择器写两套变量：[data-theme="dark"] { --q-primary: #ba68c8; } - 不要在循环或高频事件里频繁调用
setProperty，会引起强制重排
真正麻烦的不是加变量，而是让变量在暗色模式、服务端渲染、CSS 预处理三者之间保持一致 —— 一旦漏掉 [data-theme="dark"] 分支或忘了 process.client 判断，就会出现样式闪动或 SSR 与客户端不一致。
