Sass的url()函数不支持原生字符串拼接，仅接受字面量字符串或已求值的纯字符串变量，需用#{}插值实现动态路径；但插值变量必须为字符串类型，且路径解析基于CSS输出位置而非源文件位置，构建工具配置（如别名、资源复制）才是根本解决方案。
SCSS 的 url() 函数不支持原生字符串拼接，直接写 url("assets/" + $name + ".png") 会编译报错 —— 这不是你写错了语法，而是 Sass 编译器根本拒绝解析这种表达式。
为什么 url() 里不能用 + 拼接
Sass 在解析 url() 内容时，只接受两种东西：纯字面量字符串（如 "logo.png"）或已求值的、类型为字符串的变量（如 $file: "logo.png"）。它不执行运行时表达式计算，所以 "a" + $b + "c" 这类拼接在 url() 内部直接被判定为非法，报错信息通常是 SassError: expected，而不是“变量未定义”之类。
-
$icon: "home"✅ 可以用：background: url(#{"assets/" + $icon + ".png"}) -
$size: 24px❌ 不能直接拼：url(#{"icons/" + $size + ".svg"})会失败，因为24px是长度单位，不是字符串；需先转：url(#{"icons/" + inspect($size) + ".svg"}) - Windows 路径反斜杠
不要手动写"\\"，一律用正斜杠：url(#{"../images/" + $file})—— Sass 和浏览器都认
插值 #{} 能过编译，但图片还是 404 的真实原因
插值只是让代码能编译通过，不代表浏览器真能加载到资源。常见断点在这里：
- 路径是相对于最终 CSS 文件位置解析的，不是你的
.scss源文件 —— 比如 CSS 输出到dist/css/app.css，那么url("../images/x.png")就得确保dist/images/x.png存在 - 变量作用域出问题：
$file在当前文件没声明，或没通过@use正确导入，插值结果为空 →url("")→ 404 - 资源压根没复制到输出目录：Vite 默认只处理
public/下的静态文件；@/assets/里的图如果没配assetsInclude，插值再准也没用
比插值更稳的替代方案：绕过 SCSS 做路径处理
一旦路径逻辑变复杂（比如多主题图标、CDN 切换、哈希文件名），硬编码插值就难维护且易错。这时候该把路径决策交给构建工具：
立即学习“前端免费学习笔记（深入）”；
- Webpack 项目：加
resolve-url-loader（注意它不识别//行注释，第三方 SCSS 库接入前得先清理）；别名必须带~前缀才生效，如url(~@assets/icons/home.png) - Vite 项目：优先配
resolve.alias，再用css.preprocessorOptions.sass.additionalData注入全局变量，避免每个文件重复@use - 更彻底的做法：把不需哈希的资源（logo、banner）全放
public/，SCSS 中直接写绝对路径url("/assets/logo.png")—— 构建工具不碰它，路径完全可控
最常被忽略的一点：SCSS 本身没有资源处理能力，所有路径都是裸字符串。你以为在写路径，其实只是在拼 URL 文本；它能不能被正确重写、哈希、复制，取决于这个字符串有没有被 loader 拦截识别 —— 而默认情况下，它不会。
