最可靠方式是直接修改 .css 文件中的 :root 变量，但需确保文件有写入权限、网页加载的是该本地文件（非 cdn 或构建产物）、修改后显式保存并强制刷新（ctrl+shift+r）清除缓存。
直接修改 .css 文件里的 :root 变量最可靠
浏览器不提供“HTML编辑器”实时编辑外部样式表变量的机制——所谓“HTML编辑器”（如 VS Code、Sublime 或浏览器 DevTools）本身不修改文件，只是帮你打开并保存。真正生效的前提是：你有该 .css 文件的写入权限，且网页加载的是你改过的那个文件路径。
常见错误现象：DevTools 里改了 :root { --color-primary: red; }，刷新后还原；或者用编辑器改了 styles.css，但网页仍用旧缓存值。
- 确认网页引入的是本地文件（如
<link rel="stylesheet" href="css/styles.css">），而非 CDN 或构建产物（如main.abc123.css） - 修改后必须显式保存文件（
Ctrl+S/Cmd+S），不是仅在编辑器里光标移动就生效 - 浏览器可能缓存 CSS，可强制刷新（
Ctrl+Shift+R）或禁用缓存（DevTools → Network → ✅ Disable cache）
在 DevTools 里临时调试 --xxx 变量要改对位置
浏览器开发者工具能快速验证变量效果，但只作用于当前会话，不持久。关键在于：必须在 :root 下修改，而不是随便找个元素的 element.style。
使用场景：想快速测试 --spacing-md 调大后布局是否溢出，或换主题色是否协调。
- 打开 Elements 面板 → 找到
标签 → 展开其 Styles 面板 → 点击右侧的:root规则（若无，点+新增一条） - 输入
--color-bg: #f8f9fa;，回车即生效；不要写成color-bg: #f8f9fa;（缺--前缀无效） - 如果页面用的是
@layer或scoped样式（如 Vue SFC），:root修改仍全局有效，但组件内style可能用!important覆盖它
用 JavaScript 动态改变量本质是操作 document.documentElement.style
运行时修改 CSS 变量，不是编辑文件，而是通过 JS 注入内联样式到 元素上，优先级高于外部 :root 声明。
性能影响小，但要注意覆盖逻辑：多次设置同一变量，后调用会覆盖前调用。
document.documentElement.style.setProperty('--color-primary', '#0066cc');
document.documentElement.style.setProperty('--font-size-base', '15px');
- 不能用
document.body.style.setProperty——body上设的变量对子元素不可继承，除非显式inherit - 如果原
:root里写了var(--color-primary, #333)，JS 改了--color-primary，备用值就不再触发 - 暗色模式切换等场景适合这种方式，但别在循环里反复调用
setProperty，可批量合并后一次设
构建工具（如 Vite、Webpack）环境下，改变量 ≠ 直接改 .css
很多项目把 CSS 变量定义在 variables.scss 或 tokens.ts 里，最终由构建流程生成 CSS。此时直接改产出的 style.css 不但下次构建就丢失，还可能因哈希名失效。
容易踩的坑：在 dist/ 目录下找到 style.css 并修改，自以为成功，结果 npm run build 后一切回到原点。
- Vite 项目看
src/assets/css/variables.css或src/style/theme.css；Vue CLI 项目常在src/styles/variables.scss - 若用 CSS-in-JS（如 Emotion），变量可能藏在
theme.js里，改 CSS 文件完全无效 - 不确定来源？在 DevTools 的 Sources 面板里搜索
:root {或--，看文件路径属于src/还是dist/
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
