less 中 url() 变量必须用单引号写成 url('@{img-path}logo.png')，且 @img-path 末尾需带斜杠；变量路径基于生成的 css 文件位置计算，构建工具不重写变量拼接结果，推荐图片放 public 下直接写绝对路径或用 js 动态导入。
Less 编译后 background-image 404，根本不是路径写错了，而是 Less 不重写 url()、浏览器却按 CSS 文件位置解析——两者基准不一致，必出错。
url() 里的变量必须用单引号包裹
写成 url("@{img-path}logo.png") 会原样输出字符串，浏览器当字面量处理，@{img-path} 不展开；必须写成 url('@{img-path}logo.png')（单引号，不是双引号）。
-
@img-path定义末尾带斜杠：@img-path: '../assets/img/';，避免拼出../assets/imglogo.png - 变量值是相对于最终生成的 CSS 文件位置算的，不是 .less 文件位置——这点常被反向推错
- Webpack/Vite 不会重写变量拼接结果，只重写字面量
url("...")，所以@img-path的值必须让拼完后的路径能被构建工具识别
绝对路径比相对路径更可靠
手写 ../ 或 ../../ 在多层 @import 下极易脱节，尤其配合 Webpack alias 或 Vite 别名时，Less 根本不认 @/assets 这种写法。
- 图片放
public/assets/→ 直接写url('/assets/logo.png')，路径明确、环境无关、无需配置 - 图片放
src/assets/→ 放弃变量拼接，改用 JS 动态导入：import logo from '@/assets/logo.png'，再通过:style="{ backgroundImage: `url(${logo})` }"注入 - 千万别写
url(~"assets/@{name}.png")——~""内变量不展开，@{name}原样输出，必然 404
lessc 命令行里 --rootpath 是机械贴前缀
--rootpath=dist/ 只对不以 /、http、data: 开头的 url() 生效，且不做路径归一化，纯字符串拼接。
-
url("img/icon.svg")→url("dist/img/icon.svg")，但若实际部署结构是 CSS 在/css/、图片在/img/，就得设--rootpath="../" -
url(/static/logo.png)不受--rootpath影响，也不需要它 -
url(~"assets/@{file}.png")中的~""和变量全被忽略，--rootpath对它无效
真正麻烦的不是怎么写，而是变量值要同时满足：Less 编译期能展开、构建工具能重写、部署后 URL 路径真实存在——三者稍有错位，就 404。多数人卡在“以为变量能被构建链路接管”，其实不能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
