JS修改CSS变量后页面没反应，根本原因在于变量未被CSS规则正确引用或作用域不匹配：必须确保样式中用var(--x)显式调用、变量定义位置与setProperty目标一致（:root用document.documentElement，局部元素用对应element），且无拼写错误、单位缺失或旧浏览器兼容问题。
JS修改CSS变量后页面没反应，大概率不是代码写错了
直接结论：CSS变量本身是响应式的，document.documentElement.style.setProperty() 执行成功后，样式本应立刻更新。如果没变化，问题不在“能不能改”，而在“改了有没有被用到”或者“用到了但被覆盖/丢弃了”。
检查CSS变量是否真的被消费了
很多情况是变量定义了、JS也设了，但对应CSS规则里根本没用 var(--x)，或者用了但选择器没命中目标元素。
- 打开浏览器开发者工具的 Elements 面板，选中目标元素，看 Styles 面板右侧 是否列出你修改的变量（比如
--bg-color），以及它是否出现在某条生效的声明里 - 确认你写的 CSS 是类似
background-color: var(--bg-color);，而不是拼错成var(--bg_color)或漏了var()包裹 - 如果变量定义在某个局部元素上（如
.card { --color: red; }），但你在:root上 setProperty，那对这个 .card 没影响——得用element.style.setProperty()改它自己
旧浏览器（IE11/Safari 12–14）会静默丢弃含 var() 的整条声明
这不是“不渲染”，而是浏览器压根不认这行 CSS，直接跳过。结果就是：JS设了变量，CSS写了 color: var(--c);，但 IE11 下该元素颜色变成继承值或 initial（比如文字变黑、背景变透明）。
- 检查浏览器控制台有没有警告（虽然通常没有），更可靠的是用 Network 面板确认加载的 CSS 文件里是否还残留
var(--x) - 如果你用了
postcss-custom-properties，必须显式配置preserve: false才能彻底替换成静态值；默认行为是保留var()行，导致旧浏览器失效 - 如果构建产物里还能看到
var(--primary)，说明 PostCSS 插件根本没跑，或执行顺序错（比如放在autoprefixer后面）
变量值无法静态求值，PostCSS 编译时就跳过了
PostCSS 是构建期工具，只处理“一眼能看清”的常量。JS 运行时设的变量，它编译时完全不知道，也不会去管。
立即学习“前端免费学习笔记（深入）”；
-
:root { --size: calc(1rem + 2px); }→ 无法被postcss-custom-properties替换，因为含calc() -
:root { --c: var(--base); }→ 嵌套引用，不支持 -
@media (min-width: 768px) { :root { --gap: 16px; } }→ 媒体查询内定义，插件通常无法回溯解析 - 变量没定义在
:root，而是写在.header { --x: 10px; }里 → 默认不处理，除非配importFrom显式引入
真正容易被忽略的一点：你以为 JS 修改了变量，页面就应该变；但实际起作用的前提是——那个变量必须在 CSS 中被正确引用、未被浏览器丢弃、且没有被更高优先级的样式覆盖。调试时别只盯着 JS 那一行，要顺着 Elements → Styles → Computed 的链条一路往下查。
