CSS中Less应对URL路径特殊字符问题_借助Escape编码函数

Less中URL路径必须用~""包裹以避免解析错误，变量拼接需先合成再包裹，escape()函数已废弃且不适用于URL编码。

Less里escape()函数根本不能用在URL路径上

它不是为这个场景设计的，强行用会出错或无效。escape()是Less早期遗留函数，只对字符串做简单ASCII编码（比如把空格变%20），但输出结果不遵循RFC 3986标准，且无法处理Unicode字符。更重要的是：它在Less 4.0+中已被标记为废弃，编译时可能直接报warning，未来版本会移除。

URL路径中的特殊字符必须靠~""原样透出

Less编译器遇到url()里的内容，默认会尝试解析括号、变量、运算符——比如url("assets/[email protected]")里的@会被当成变量起始符，url("fonts/Inter 300.woff2")里的空格和反斜杠会触发语法错误。这时必须用~""包裹整个url()值：

• background: url(~"assets/[email protected]"); → 输出background: url("assets/[email protected]");
• 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管不到。