less中url()路径解析失败是因为编译器将括号内内容当表达式处理，遇@、空格、反斜杠等特殊字符会误解析；必须用~""强制原样透出，且内部不支持@{var}插值，变量需先拼接再包裹。
Less中url()里的路径为什么总被解析失败
因为Less默认把url()括号里的内容当表达式处理，遇到@、+、空格、反斜杠甚至中文，都会触发语法解析——不是浏览器报404，是Less编译器直接报错或输出错误字符串。
比如：url("fonts/Inter\ 300.woff2") 中的空格和反斜杠，会被Less当成运算符或变量起始符；url("assets/icon@2x.png") 中的@会被识别为变量声明前缀，结果编译成url("assets/iconundefined2x.png")。
- 所有特殊字符（空格、
@、#、?、中文、反斜杠）都必须原样透出，不能让Less插手 -
~""是唯一可靠方式：它强制Less跳过内部解析，把引号内容原封不动塞进url() - 别指望
escape()——它已废弃，不遵循RFC标准，且对Unicode完全失效
~""必须紧贴url()，且不能包变量插值
~""只作用于字符串字面量，内部不支持@{var}插值。写url(~"fonts/@{name}.woff2")，结果就是url("fonts/@{name}.woff2")，变量根本不会替换。
正确做法是先拼好完整路径再包裹：
- 定义：
@font-path: "fonts/Inter-Italic.woff2"; - 使用：
src: url(~"@{font-path}");→ 输出src: url("fonts/Inter-Italic.woff2"); - 错误示范：
url(~"fonts/@{name}.woff2")、url(~ @font-path)、url(~"fonts/" + @name)
@import外部URL或别名路径时，~是绕过解析的开关
@import "https://"会报File not found，因为Less把它当本地路径搜；@import "@/mixins.less"在Webpack里报错，是因为css-loader没配alias——这两类问题都靠~解决。
-
@import url(~"https://fonts.googleapis.com/css2?family=Inter")→ 输出标准CSS@import url(...) -
@import "~@/mixins.less"→ Webpack把~@识别为模块请求，走alias配置（如@ → src） - 禁止写法：
@import ~ "https://"（中间有空格）、@import ~@url（不支持变量）、@import "@/mixins.less"（没~，css-loader不认alias）
路径是否有效，跟~无关，只跟最终CSS文件位置有关
~""只管编译时不报错、不乱码，但它不校验路径是否存在，也不修正相对位置。真正导致404的，八成是路径写错了参照系。
- Less源文件在
src/styles/base.less，但生成的CSS在dist/css/app.css→ 所有url()路径必须相对于dist/css/来写 - 用
public/目录放图？变量得写@img-base: "/img/"（绝对路径）；用src/assets/？得算清less文件到assets的层级，比如@img-base: "../../assets/img/" - 检查方法：打开编译后的CSS，复制
url()里那段路径，粘到浏览器地址栏看能不能直接加载
最常被忽略的一点：~""只解决Less编译阶段的字符串透传，如果路径含中文或#，运行时仍需JavaScript调用encodeURIComponent()——那是HTTP层的事，Less真管不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
