SCSS变量无法运行时修改，仅编译期生效；真正支持运行时动态的是CSS自定义属性（--xxx），需通过SCSS生成var(--xxx)语句并由JS控制其值。
SCSS变量无法在运行时动态生成CSS自定义属性——它们只在编译阶段存在，最终被替换成固定值。真正能被Vue响应式驱动的，只有 --xxx 这类CSS自定义属性，且必须由JS注入或通过 :root + 插值提前导出。
为什么不能直接用 $color 绑定 :style
SCSS变量不是JavaScript变量，不能被Vue的响应式系统读取。写 :style="{ '--primary': $primary }" 会报错，因为 $primary 在模板里根本不存在（它早就在构建时被替换成 #3b82f6 了）。
常见错误现象：
-
$primary: #3b82f6写在_variables.scss里，但组件中:style="{ '--primary': primaryColor }"的primaryColor是空的，结果样式失效 - 误以为
color: $primary能随JS切换主题——实际编译后就是color: #3b82f6，永远不变 - 在
<style lang="scss">里写--primary: $primary，SCSS编译器报错Invalid CSS after "--primary:"
正确做法：用 #{$primary} 在 :root 中导出静态映射
你得把SCSS变量“快照”成一组确定的CSS自定义属性，供后续JS切换主题时复用。这一步必须在SCSS编译期完成。
立即学习“前端免费学习笔记（深入）”；
实操建议：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 单独建
_themes.scss，定义多套主题色：$light-primary: #3b82f6、$dark-primary: #6366f1 - 在
main.scss或全局样式入口里写：:root { --primary-color: #{$light-primary}; } :root[data-theme="dark"] { --primary-color: #{$dark-primary}; } - 确保这些
:root规则在所有组件样式之前加载（@import 'themes'放最顶） - 别在组件 scoped style 里重复写
:root，会导致覆盖或无效
Vue组件中如何安全读取并响应这些变量
组件内不能靠SCSS变量做响应式，只能靠CSS自定义属性 + var() + JS控制 data-theme。
使用场景与要点：
-
<div :style="{ '--bg': bg }">✅ 可以动态注入新值，但仅影响该元素及其后代 -
<div class="card">+.card { background: var(--bg, #fff); }✅ 安全回退 - scoped 样式中用
var(--primary-color)没问题，只要变量在祖先元素（如document.documentElement）上已设置 - 避免在子组件
<style scoped>里对非根元素直接var(--xxx)，若父组件未透传，可能取不到
切换主题时该操作 dataset.theme 还是 style.setProperty
优先用 document.documentElement.dataset.theme = 'dark'。它触发CSS选择器匹配（如 :root[data-theme="dark"]），不依赖JS重算，兼容性更好，也更符合CSS变量的设计意图。
容易踩的坑：
- 只改
style.setProperty('--primary-color', 'red')，但没删掉其他主题变量（比如--bg还是旧值），导致混合混乱 - 在微信小程序旧基础库（如2.25.2前）里，
style.setProperty失效，而dataset.theme稳定 - 忘了给所有主题分支完整定义同一组变量名，缺一个就会 fallback 到
inherit或initial，颜色突然变黑或透明
核心就一点：SCSS负责把主题“画好图纸”，JS负责“换图纸”，CSS变量是图纸上的标注，不是活的管线。漏掉任一环，主题切换就断在半路。
