var(--icon)不能直接在url()内拼接，因CSS不支持url(var(--x) + ".png")这类字符串运算；必须确保变量值为无引号纯路径、无非法字符，且路径相对于最终CSS文件位置有效。
为什么var(--icon)不能直接塞进url()里拼接
因为var()只是值替换，不是字符串运算。写url(var(--icon) + ".png")会直接报语法错误——CSS 不支持在url()内部做+拼接，连 JS 那种模板字符串语法都不认。
url(var(--path))必须满足的三个硬条件
能跑通的前提不是“写了就行”，而是三件事同时成立：
-
--path定义时不能带引号：--icon-home: ./assets/icon.svg✅；--icon-home: "./assets/icon.svg"❌（引号会让url()解析成非法字符串） - 变量值必须是纯路径文本，不能含空格、中文、括号等未编码字符；调试时可直接把
url(var(--path))生成的完整 URL 粘到浏览器地址栏验证是否可访问 - 路径基准是最终 CSS 文件所在位置，不是 HTML 或 SCSS 源文件位置；比如 CSS 输出到
dist/css/app.css，那url(../images/x.svg)就得确保dist/images/x.svg真实存在
SCSS/Less 里用变量拼路径，为什么url("@{var}")或url(#{"assets/" + $name})还是 404
插值能过编译，不代表浏览器能加载。真正卡住人的地方往往不在 CSS 本身：
- 变量没声明或作用域不对：比如
$icon在另一个文件里，又没用@use导入，插值结果就是空字符串 →url("")→ 404 - 构建工具没把资源复制过去：Vite 默认只处理
public/下的文件，@/assets/里的图如果没配assetsInclude，插值再准也没用 - 路径算错了层级：Less 要求
@{var}必须用单引号包裹：url('@{img-base}/logo.png')；SCSS 的#{}里不能出现非字符串类型，$size: 24px得先inspect($size)转成字符串
比变量拼接更稳的路径管理方式
一旦涉及多环境、CDN、哈希文件名或主题切换，硬拼路径就容易失控。这时候该让构建工具接管：
立即学习“前端免费学习笔记（深入）”；
- Vite 项目：配
resolve.alias（如@assets: './src/assets'），然后在 SCSS 里写url('~@assets/icons/home.svg')（注意~前缀） - 所有不需哈希的静态资源（logo、banner）统一放
public/目录，SCSS 中直接写绝对路径url("/assets/logo.png")——构建工具不处理它，路径完全可控 - 需要运行时切换的场景（如深色模式图标），别用 CSS 变量存路径，改用 JS 动态设置
style.backgroundImage，绕过 CSS 解析限制
