应使用Less变量统一管理图片路径并配合插值语法~""，如background: url(~"@{img-base}/logo.png")；变量值需适配环境（如@img-base: "/img"用于Vite public目录）；注意路径拼接规范及SVG fragment的ID变量化。
Less里图片路径写死导致重构时批量替换很痛苦
直接在background-image里写url(../assets/img/icon.png)看似简单，但项目结构一调、主题目录一加、构建工具一换，所有路径全崩。这不是写法错，是把本该由变量管理的路径耦合进了样式细节里。
用变量统一收口路径，改一次，全局生效。关键不是“能不能用变量”，而是变量值本身得能适配不同环境：
-
@img-base: "../assets/img";适合开发时 Webpack/Vite 的默认解析规则 - 如果用了
public目录（如 Vite），就得改成@img-base: "/img";，否则构建后404 - 多主题场景下，可定义
@theme: "light";，再拼出@img-base: "../themes/@{theme}/img";
Less变量拼接路径时url()不识别变量值
这是最常卡住人的点：写了@img-base: "../assets/img"; background: url("@{img-base}/logo.png");，结果编译出来还是字面量url("@{img-base}/logo.png")，浏览器当然报错。
Less默认不展开变量进url()括号内——必须用插值语法~""强制转义：
background: url(~"@{img-base}/logo.png");
注意：~""里不能有空格，路径拼接要干净；如果变量含尾部/，就别在url()里重复写，否则变成//。
Webpack或Vite环境下Less路径变量和实际资源位置对不上
Less编译器只管文本替换，不管文件是否存在。路径对不对，取决于构建工具怎么解析@import和url()里的相对路径。
常见断点：
- Less文件在
src/styles/，但@img-base: "../assets/img"是按Less文件位置算的相对路径，不是按HTML入口算的 - Vite中
public下的图片必须用绝对路径/img/logo.png，此时@img-base: "/img"才有效 - Webpack的
resolve.alias对Less无效，别指望@img-base: "@/assets/img"能自动映射
用svg-sprite或雪碧图时，变量路径容易漏掉id拼接
用url()引用SVG雪碧图时，路径后面往往还要跟#icon-home这种fragment。变量只管前面，后面ID得手动拼，稍不注意就漏了#：
.btn-home { background: url(~"@{sprite-base}/sprite.svg#icon-home"); }
建议把常用图标也抽成变量，避免硬编码ID：
@icon-home: "icon-home";background: url(~"@{sprite-base}/sprite.svg#@{icon-home}");
路径变量本身不解决加载时机问题——SVG雪碧图得确保在页面加载前已注入DOM，否则#xxx片段会静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
