最稳方式是用:style绑定--xxx变量，兼容所有vue 3.x（≥3.0），需传对象、键名带--前缀并加引号、值来自响应式源、css中用var(--xxx)显式读取。
用 :style 绑定 --xxx 变量（最稳，兼容所有 Vue 3.x）
这是目前落地最可靠的方式，不依赖构建工具版本或编译器特性，只要 Vue ≥ 3.0 就能跑通。
常见错误现象：样式没变、Elements 面板里看不到 style="--color: #xxx"。
-
:style必须传对象，不能传字符串：:style="{ '--color': textColor }"✅，:style="`--color: ${textColor}`"❌（后者被当静态属性忽略） - 键名必须带双短横线前缀且加引号：
"--bg-opacity"✅，bgOpacity或bg-opacity❌ - 单位要手动拼：
gap + "rem"✅，gap❌（否则 0 可能变成空字符串） - 值必须来自响应式源：
ref、computed或setup()中的响应式解构，普通let不会更新 - CSS 里得显式读取：
color: var(--color)，只设不读，变量就“挂在那里”没效果
在 <style scoped></style> 中用 v-bind()（简洁但有硬性门槛）
写法干净，把变量逻辑从模板移到样式层，但不是运行时执行，而是编译时注入 CSS 变量，对环境敏感。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
常见错误现象：CSS 文件里还是 color: v-bind(textColor)，没转成 var(--xxx)；或者首次渲染空白。
- 必须满足三个条件：Vue ≥ 3.4、Vite ≥ 4.3、使用
<script setup></script> - 变量只能是顶层标识符：
v-bind(primary)✅，v-bind(theme.primary)❌（需先解构：const primary = computed(() => theme.value.primary)） - 仅在
<style scoped></style>或<style module></style>下生效，普通<style></style>会被忽略 - 初始值建议设默认值：
const textColor = ref('#333')，避免服务端渲染（SSR）时变量未初始化导致样式断裂 - 编译后变量名会加哈希后缀（如
--c845efc6-textColor），不影响使用，但别在 JS 里手动读取这个名
为什么变量设了却没生效？按链路顺序排查
不是代码写错，而是某个环节断开了。打开浏览器开发者工具，按这个顺序查：
- Elements 面板 → 目标元素的
style属性里有没有出现--xxx: value？没有 →:style没绑定上，或变量非响应式 - Computed 面板 → 搜
--xxx，显示initial或空 → CSS 里没写var(--xxx)，或作用域被all: initial/ Shadow DOM 截断 - 子组件里用了
var(--xxx)却不生效 → 先确认父组件是否把变量设在可继承的节点上（比如根<div>），再检查是否用了 <code>:deep(.child) { color: var(--xxx); }确保穿透 scoped - 用了
v-bind()但编译后仍是原文 → 大概率是@vitejs/plugin-vue版本太低，升级到最新版 -
all: initial会清空所有继承的 CSS 变量，包括自定义属性 - Shadow DOM 会天然隔离变量，跨 shadow boundary 无法继承，此时需改用
:root或事件透传 - 第三方组件（如 Element Plus）若未暴露 CSS 变量 API，
:deep()可能失效，更稳的做法是把变量挂到:root或父容器，并配合属性选择器（如[theme="dark"] .btn）控制 - 多个同名变量嵌套时，就近原则生效 —— 子元素上设的
--color会覆盖父元素设的，无需额外处理
别忽略的作用域和继承细节
CSS 变量不是“设了就全局可用”。哪怕你在组件根元素上用 :style 设了 --primary，它的作用域也只限于该元素及其后代，除非被显式重置。
