CSS变量不能直接用于background-image，因var(--path)仅作字符串替换，不触发url()解析；必须写为background-image: url(var(--path))，且变量值需加引号，Safari 15.4+才支持，旧版浏览器静默忽略。
因为 url() 是 CSS 声明期就解析的函数，不是运行时可执行的表达式；变量（var(--x)）只是字符串替换，不会触发 url() 的路径解析逻辑。
background-image: var(--path) 为什么完全不加载图片
浏览器把 --path: "url(./img.png)" 当作纯字符串值，background-image: var(--path) 展开后等价于 background-image: "url(./img.png)"——这不是合法的 CSS 值，直接被忽略，不报错也不请求资源。
- 只有
background-image: url(var(--path))才可能生效，且前提是变量值本身不含url() - 变量值必须加引号：比如
--path: "./img.png"，否则含空格或括号时解析中断 - 该写法依赖浏览器对
url(var(--x))的动态解析支持，Safari 15.4+ 才开始稳定支持
url(var(--x)) 在哪些环境会静默失效
旧版 Safari、Android WebView（Chrome 80 之前）、Electron 内核（尤其基于 Chromium 78–89 的版本）会完全跳过这条声明，getComputedStyle(el).backgroundImage 返回 "none" 或空字符串。
- 不能靠
@supports (background-image: url(var(--x)))兜底所有情况——部分 WebView 对@supports本身支持也不完整 - Vite / Webpack 构建过程不会转译或修复这段语法，运行时行为 100% 由浏览器决定
- 内联
<style>中使用时，路径仍以 HTML 文件为基准，但开发者常误以为以 JS 或当前组件为准
JS 动态设置时路径 404 的真实原因
不是变量没传进去，而是 url() 中的相对路径始终相对于最终生成的 CSS 文件位置，而 JS 设置的变量无法改变这个解析上下文。
立即学习“前端免费学习笔记（深入）”；
- Webpack 抽离 CSS 后，
url("./logo.png")会被解析为相对于/css/chunk-xxx.css，而非源 SCSS 文件 - 用
element.style.backgroundImage = "url(" + path + ")"绕过 CSS 变量，反而让路径失去构建工具的别名/哈希处理能力 - 推荐做法：变量只存路径片段（如
--icon: "logo.svg"），CSS 里用url("/assets/" + var(--icon))拼接，并配合 Vite 的resolve.alias或 Webpack 的file-loader
最易被忽略的一点：CSS 变量不是模板引擎，它不参与路径解析；真正起作用的是构建阶段的路径重写和浏览器对 url() 的静态解析规则。漏掉任一环，var(--x) 就只是个安静的字符串。
