浏览器按最终生成的css文件位置解析url()，less仅字符串替换不校验路径；绝对路径以/开头，变量拼接需用~"@{var}"，且值须匹配css输出位置。
Less里的url()路径解析位置在哪
浏览器加载CSS时，所有url()都是相对于最终生成的CSS文件位置解析的，不是.less源文件位置，也不是HTML入口位置。Less编译器只做字符串替换，不校验路径是否存在，也不调整路径语义。你写url("images/logo.png")，它就原样输出，哪怕.less在src/less/、CSS被写入dist/css/，浏览器仍会去dist/css/images/logo.png找——而实际资源可能在dist/images/。
绝对路径怎么写才真正“绝对”
以/开头的路径才是根绝对路径，它从站点根目录开始算，和CSS输出位置无关。适合放public/或static/下的资源：
-
@img-base: "/img/"; background: url(~"@{img-base}logo.png");→ 输出url("/img/logo.png")，Vite/Webpack 都能直接命中public/img/logo.png - 避免漏掉尾部
/：写成@img-base: "/img"再拼url(~"@{img-base}/logo.png")会变成/img//logo.png，多数服务器容忍，但不严谨 - 不要用协议头：
url("https://cdn.com/logo.png")可直接写，但@cdn: "https://cdn.com"; url("@{cdn}/logo.png")无效——变量插值不支持协议路径
相对路径必须按CSS输出位置反推
相对路径（如../assets/img/）是相对于最终CSS文件所在目录计算的。很多人误按.less文件位置写，结果开发正常、打包404。
- 假设CSS输出到
dist/css/app.css，图片在dist/assets/img/logo.png，那就要写url("../assets/img/logo.png")，而不是按src/less/去算 - 用变量时必须带
~""插值：@img-base: "../assets/img/"; background: url(~"@{img-base}logo.png");—— 不加~""，@{img-base}根本不会展开 - Webpack/Vite 的
resolve.alias（如@/assets）对 Less 变量完全无效，@img-base: "@/assets/img/"纯属浪费时间
构建工具的rootpath和relativeUrls别乱开
这两个参数看似能“自动修路径”，实则干扰大、可控性差，尤其在多层@import或现代构建流程中容易翻车。
-
--rootpath=dist/只给未以/、http、data:开头的url()加前缀，但它不碰变量插值结果，也不改@import路径 -
relativeUrls: true会尝试把所有相对url()标准化为相对于CSS输出目录的路径，但Less推断逻辑脆弱，常把../fonts/a.woff2错转成../../fonts/a.woff2 - 真正稳定的做法是：路径变量值手动对齐最终CSS位置，不用任何自动修正机制
最易忽略的一点：SVG fragment ID（如#icon-home）必须和路径拼在同一url()里，且@{id}也要用~""包裹，否则url(~"@{sprite}/sprite.svg#@{id}")中的@{id}不会展开，静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
