less中url("@{img-path}logo.png")编译后404，因其不解析变量，必须用单引号包裹为url('@{img-path}logo.png')；变量值需严格匹配最终css文件相对于资源的实际位置，且构建工具仅重写字面量url，不处理变量拼接。
直接结论：Less 本身不解析 url() 内的路径，变量拼接必须用 @{var} + 单引号包裹整个字符串，且变量值要严格匹配最终 CSS 文件相对于资源的实际位置；构建工具（Webpack/Vite）不会自动重写变量里的路径，只处理字面量 url("...")。
Less 中 url("@{img-path}logo.png") 为什么编译后还是 404？
因为 Less 编译器只做纯文本替换，不校验文件是否存在，也不理解路径语义。你写的 url("@{img-path}logo.png") 如果没加单引号，Less 会原样输出字符串 url("@{img-path}logo.png")，浏览器当然找不到。
- 必须写成
url('@{img-path}logo.png')（单引号，不是双引号） - 变量定义时末尾建议带斜杠：
@img-path: '../assets/img/';，避免拼接出img/logo.png变成img/logo.png - 路径是相对最终生成的 CSS 文件位置算的，不是 .less 文件位置 —— 这点很多人误判
- 如果用了 Webpack 的
resolve.alias（比如@/assets），Less 不识别它，@img-path: "@/assets/img/"是无效的
Webpack 和 Vite 下 @img-path 值怎么设才不脱节？
构建工具对 url() 字符串的重写逻辑，和 Less 变量拼接是两套机制。变量值必须手动对齐构建规则，否则开发能跑、打包就 404。
- 图片放在
public/目录下（如public/img/logo.png）→@img-path: '/img/'（绝对路径，开头斜杠） - 图片放在
src/assets/img/下 →@img-path: '../../assets/img/';（相对路径，需按 .less 文件实际嵌套层级计算） - Vite 默认支持
url()字面量重写，但变量拼接部分不参与 —— 所以@img-path值必须让最终输出的url('../assets/img/logo.png')能被 Vite 正确定位 - Webpack 的
css-loader同理：它只处理硬编码字符串，不碰变量展开结果
多皮肤或多环境时，@base-url 怎么安全切换？
别指望构建时用 modifyVars 动态注入 —— 开发和构建路径不一致，极易上线 404。真正可靠的是静态分离 + 显式引入。
- 把不同皮肤的路径变量抽成独立文件，如
skins/skin-dark.less：@base-url: '../assets/skin-dark/'; - 主样式入口根据环境变量或配置决定
@import哪个皮肤文件，确保@base-url在 Less 编译期就固定 - 如果皮肤还涉及字体、SVG sprite，配套定义
@font-path、@sprite-path，但别拆太细，2–3 个核心变量足够 - 拼接 SVG fragment ID 时也要用插值：
mask: url(~"#@{icon-id}")，漏掉~""或只包变量部分都会失效
最易忽略的其实是路径计算基准点：它永远是最终 CSS 文件所在目录，不是 HTML、不是入口 .less、更不是构建配置里写的 output.path。改一个变量值，得同步核对三处：变量定义、.less 文件位置、构建后 CSS 输出路径。错一环，404 就跟着来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
