CSS变量不能直接存url(./logo.png)，因声明时即被解析为字符串，导致var(--img-path)展开后无法加载；正确做法是变量仅存纯路径如"./assets/icon-home.svg"，使用时写url(var(--icon-home))。
CSS变量里不能直接存url()字符串
直接写 --img-path: url(./logo.png) 看似合理，但实际会出问题：CSS变量值是纯字符串，url() 在声明时就被解析了一次，而变量本身不会触发二次解析。结果就是，用 background: var(--img-path) 时，浏览器看到的是字面量 url(./logo.png) 字符串，不是可加载的资源路径——背景显示为空，控制台还可能报 Failed to load resource。
必须把路径字符串单独存，运行时再套url()
正确做法是只让 CSS 变量保存相对或绝对路径的纯文本，比如 ./assets/icon-home.svg，然后在使用处手动包裹 url()。这依赖于 CSS 函数调用的执行时机：变量展开后，外层 url() 才真正解析路径。
:root { --icon-home: "./assets/icon-home.svg"; }.nav-item.home { background: url(var(--icon-home)); }- 路径中必须带引号（双或单），否则空格、括号、特殊字符会解析失败
- 路径是相对于 CSS 文件位置计算的，不是 HTML 或 JS 的执行位置
动态切换背景图时，避免重复写url()和引号
如果多个类要切换不同图片，每个都写 url(var(--xxx)) 很啰嗦，也容易漏引号。更稳妥的方式是封装一层函数式变量，用 background-image 配合 var() 组合：
body {
--bg-login: "./img/login-bg.jpg";
--bg-dashboard: "./img/dashboard-bg.jpg";
background-image: url(var(--bg-login));
}
body.dashboard {
background-image: url(var(--bg-dashboard));
}
注意：url() 不能嵌套在另一个函数里（比如 image-set(url(var(--x))) 不行），所以这种“函数式”仅限于单层 url() 调用。
立即学习“前端免费学习笔记（深入）”；
Webpack/Vite 环境下路径别名会导致404
开发时用了 @/assets 这类别名？CSS 变量不经过 JS 模块解析器，url(var(--logo)) 中的 @/assets/logo.png 会被当字面路径请求，自然 404。解决方法只有两个：
- 变量里写真实相对路径（如
../assets/logo.png），靠目录结构对齐 - 改用 CSS 预处理器（如 Sass）的变量 +
url()，它能在构建时解析路径 - 或者放弃变量，改用 CSS 自定义属性配合 JS 控制：JS 读取路径配置，动态设置
style.setProperty('--bg-url', require('./logo.png'))（需模块系统支持）
真正容易被忽略的是：CSS 变量里的路径，从来不是“运行时由 JS 解析”的，它从声明那一刻起，就只是字符串——你信它能自动 resolve 别名，它就永远 404。
