sass 的 url() 函数不支持原生字符串拼接，仅接受字面量字符串或已求值的纯字符串变量，需用 #{} 插值实现动态路径；但插值变量必须为字符串类型，且路径解析基于 css 输出位置而非源文件位置，构建工具配置（如别名、资源复制）才是根本解决方案。
为什么直接拼接字符串会导致 Sass 编译失败
Sass 的 url() 函数内部不支持原生字符串拼接，比如 url("assets/" + $icon-name + ".png") 会直接报 SassError: expected。这不是语法错误，而是 Sass 编译器在解析 url() 内容时，只接受字面量字符串或已求值的变量（且该变量必须是纯字符串），不支持运行时表达式拼接。
用 #{} 插值解决路径动态组合
插值语法 #{} 是唯一能在 url() 中安全嵌入变量的方式，它把变量值“注入”为字符串字面量的一部分。但要注意：被插值的变量本身必须是字符串类型，不能是数字、颜色或 list。
-
$icon-name: "home";✅ 可直接插值：background: url(#{"assets/" + $icon-name + ".png"}); -
$size: 24px;❌ 不能直接插值：url(#{"icons/" + $size + ".svg"})会报错，因为24px是长度单位，不是字符串；需先转成字符串：url(#{"icons/" + inspect($size) + ".svg"}) - 路径中含变量且需兼容 Windows 反斜杠？别手动拼
"\\"，统一用正斜杠：url(#{"../images/" + $file})，Sass 和浏览器都认
常见陷阱：插值后路径仍 404 的真实原因
插值能通过编译，不代表资源真能加载。很多开发者卡在这一步：
- 插值生成的路径是相对 CSS 输出位置的，不是 .scss 源文件位置 —— 构建工具（如 Webpack/Vite）通常把最终 CSS 放在
dist/css/，而url(../images/x.png)就得确保dist/images/x.png存在 - 如果用了
@use或@forward，变量作用域受限，$file在当前文件未声明或未导入，插值结果为空字符串 →url("")→ 404 - 构建时资源未复制到输出目录（例如 Vite 的
public/外静态资源未配置assetsInclude），插值再准也白搭
比插值更稳的方案：用 resolve-url-loader 配合别名
插值适合简单场景；一旦路径逻辑变复杂（比如多主题图标路径、CDN 切换），硬编码插值就难维护。此时应转向构建层处理：
- Webpack 项目：在
sass-loader前加resolve-url-loader，它能重写url()中的相对路径，但注意它不识别//行注释，接入第三方 SCSS 库前得先清理注释 - 路径别名必须带
~前缀才生效：url(~@assets/icons/home.png)，否则@assets被当普通路径字面量处理 - Vite 用户优先配
resolve.alias，再配合css.preprocessorOptions.sass.additionalData注入全局变量，避免每个文件重复@use
插值是兜底手段，不是路径管理的终点。真正省心的方式，是让路径解析脱离 Sass 运行时，交给构建工具在打包阶段一次性 resolve 干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
