less中url路径必须用~""包裹以避免解析错误，变量拼接需先合成再包裹，escape()函数已废弃且不适用于url编码。
Less里escape()函数根本不能用在URL路径上
它不是为这个场景设计的，强行用会出错或无效。escape()是Less早期遗留函数，只对字符串做简单ASCII编码（比如把空格变%20），但输出结果不遵循RFC 3986标准，且无法处理Unicode字符。更重要的是：它在Less 4.0+中已被标记为废弃，编译时可能直接报warning，未来版本会移除。
URL路径中的特殊字符必须靠~""原样透出
Less编译器遇到url()里的内容，默认会尝试解析括号、变量、运算符——比如url("assets/icon@2x.png")里的@会被当成变量起始符，url("fonts/Inter\ 300.woff2")里的空格和反斜杠会触发语法错误。这时必须用~""包裹整个url()值：
-
background: url(~"assets/icon@2x.png");→ 输出background: url("assets/icon@2x.png"); -
src: url(~"fonts/Inter\ 300.woff2");→ 输出src: url("fonts/Inter\ 300.woff2");（注意：反斜杠需保留，由浏览器解析） - 变量拼接也得先合成再包：
@font-path: "fonts/Inter-Italic.woff2"; font-family: url(~"@{font-path}");
别写url(~"fonts/@{name}.woff2")——~""内部不支持插值，@{name}不会被替换，结果就是字面量url("fonts/@{name}.woff2")。
构建工具路径问题比编码更常导致404
真正让URL失效的，八成不是特殊字符，而是@font-face或background-image里的路径相对于最终CSS文件位置错了。Less不关心文件系统，它只管字符串输出。所以：
-
@icon-url: "../images/icons.svg"; background: url(~"@{icon-url}");—— 路径必须按生成后的CSS文件位置来写，不是Less源文件位置 - Webpack +
less-loader下，如果用了public目录，路径可能要改成/icons.svg并加~"" - 用
resolve-url-loader可自动重写相对路径，但需配合less-loader的paths选项
检查方式：打开编译后的CSS，复制url()里的完整路径，粘到浏览器地址栏看是否能直接访问资源。
最易忽略的一点：~""只解决Less编译阶段的解析冲突，不负责运行时URL合法性。如果路径含中文或#等字符，仍需服务端或前端JavaScript做encodeURIComponent()处理——那是HTTP层的事，Less管不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
