会失效，因为CSS变量中直接写url(./img/logo.png)会被当作纯字符串存储，浏览器不会二次解析；正确做法是变量只存纯路径如"./img/logo.png"，使用时写background-image: url(var(--bg))。
自定义属性里写 url() 会失效吗？
不会失效，但 url() 在 CSS 自定义属性（--xxx）中**不能直接解析路径**。浏览器把 url(./img/logo.png) 当作纯字符串存进变量，直到它被用在 background-image 等接受 URL 的属性里时，才真正解析——而这时路径仍以**使用该变量的 CSS 规则所在位置为基准**，不是定义变量的位置。
为什么 --bg-url: url(../img/icon.svg) 在 :root 里定义却加载失败？
因为路径解析时机和上下文没变：即使你在 :root 里定义了 --bg-url: url(../img/icon.svg)，当它被 background-image: var(--bg-url) 消费时，路径还是相对于**声明该 background-image 的选择器所在的 CSS 文件位置**，不是 :root 所在文件（除非两者在同一文件且无 @import）。
- 常见错误：在
/css/base.css的:root里写--icon: url(../img/icon.svg)，然后在/css/components/button.css里用background-image: var(--icon)—— 这时路径会从button.css目录向上找，而非base.css - 更安全的做法：统一用绝对路径，比如
--icon: url(/img/icon.svg)，避免相对路径漂移 - 如果必须用相对路径，确保所有消费该变量的 CSS 都和变量定义在同一个构建产物文件里（例如 Webpack/Vite 把所有 CSS 合并为一个
main.css），否则上下文就不可控
Webpack/Vite 中自定义属性的图片路径会被自动处理吗？
不会自动重写。构建工具对 url() 的重写只发生在**普通 CSS 声明值里**（如 background-image: url(./logo.png)），而对 var(--x) 中的字符串内容不做解析或替换。
- 你写
--logo: url(./logo.png)，构建后仍是原样字符串，不会转成 base64 或 public 路径 - 如果图片放在
src/assets/，Vite 的url(./assets/logo.png)能被识别并转为正确路径，但--logo: url(./assets/logo.png)不会 - 解决办法：改用内联方式（如 JS 动态设置
style.setProperty('--logo', 'url(/assets/logo.png)')），或用构建时插件预处理自定义属性
要不要给自定义属性里的 url 加引号？
要加，而且必须用双引号或单引号包裹整个 url() 字符串。
- 错：
--bg: url(img/bg.jpg)→ 浏览器可能把空格或括号误判为分隔符 - 对：
--bg: "url(img/bg.jpg)"或--bg: "url('/img/bg.jpg')" - 尤其当路径含空格、中文、括号时，不加引号大概率导致变量值截断或解析失败
- 注意：引号是包裹整个字符串，不是只包路径，即
"url(...)"，不是url("...")（后者是普通声明写法，不适用于变量值）
路径解析锚点始终是「最终使用变量的那条 CSS 规则」所在文件，不是变量定义处，也不是 HTML 页面。这点一旦忽略，调试时就会反复检查错地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
