Less中url("@{var}/img.png")不生效，因变量需用~"@{var}/img.png"强制插值；路径值须匹配构建工具规则（如Vite用/img，Webpack用../assets/img），且应统一定义于paths.less中导入。
Less变量拼接图片路径时url()不生效，编译后还是字面量
这是最常卡住人的点：写了@img-base: "../assets/img"，然后写background: url("@{img-base}/logo.png")，结果浏览器报404——因为Less默认不把变量展开进url()括号内，它原样输出了字符串"@{img-base}/logo.png"。
必须用插值语法~""强制转义，让Less把变量值当纯文本插入：
-
background: url(~"@{img-base}/logo.png")✅ 编译后是url("../assets/img/logo.png") -
~""里不能有空格，比如~" @{img-base}/logo.png "会失败 - 如果
@img-base末尾已带/，就别在url()里再写一次，否则变成//导致路径错误
不同构建环境（Vite/Webpack）下@img-base变量值怎么设才不404
Less只做文本替换，不校验文件是否存在。路径对不对，取决于构建工具如何解析url()里的相对路径。
- Vite用
public目录时：@img-base: "/img"（注意开头斜杠，对应public/img/） - Webpack或Vite默认
src/assets时：@img-base: "../assets/img"（相对当前less文件位置） - 多主题场景可嵌套：
@theme: "dark"; @img-base: "../themes/@{theme}/img" - 变量值一旦写死，就和构建配置强耦合；建议在项目文档里明确标注每个环境对应的
@img-base取值
多个组件共用同一组图片路径变量，怎么避免重复定义和作用域污染
不要每个less文件都写一遍@img-base，容易漏改、值不一致。
立即学习“前端免费学习笔记（深入）”；
- 抽一个
variables.less或paths.less，集中定义@img-base、@icon-base等 - 所有用到的less文件顶部统一
@import "./common/paths.less" - Less变量作用域是块级的，媒体查询内重定义的变量不会泄漏到外层，适合断点适配
- 如果某组件需临时覆盖路径（比如CDN图），在局部用
@img-base: "//cdn.example.com/img"即可，不影响全局
用变量拼接SVG fragment ID时容易忽略的转义细节
SVG sprite常用url(#icon-home)这种写法，若ID也想变量化，同样要~""：
- 错误写法：
mask: url("#@{icon-id}")→ 编译后仍是url("#@{icon-id}") - 正确写法：
mask: url(~"#@{icon-id}")→ 编译后是url("#home") - 注意
~""包裹的是整个URL字符串，包括#符号，不能只包变量部分 - 如果
@icon-id本身含引号或特殊字符，得提前清理，Less不做运行时校验
@img-base的值、~""的位置、以及构建工具对相对路径的实际解析逻辑，三者稍有错位就会404。最容易被忽略的是：你改了变量值，却没同步更新@import路径或构建配置里的静态资源规则。 
