Less中变量拼接url()需用~""包裹实现插值，如~"url('@{base-path}/icon.png')"；引号须内外统一、无多余空格；构建工具别名需在loader中配置paths，Less不识别@/等模块别名。
Less中用变量拼接url()时路径不生效？
直接在url()里写变量（比如url("@{base-path}/icon.png")）会原样输出字符串，浏览器解析失败——Less默认把整个url()当普通值处理，不展开变量。
必须用~""包裹并手动拼接字符串
Less的~""是「转义字符串」，让内容按字面量输出到CSS，同时允许变量插值。图片路径拼接只能走这条路：
@base-path: "/assets/images";
.icon-home {
background-image: ~"url('@{base-path}/home.svg')";
}
-
~""外层不能加空格，写成~" url(...)"会导致CSS语法错误 - 引号类型要统一：里面用单引号，外面用双引号（或反过来），避免嵌套冲突
- 路径中不要有多余空格，
~"url( '@{p}' )"会输出url( '/x.png' )，括号内空格会被保留，部分浏览器可能拒绝加载
拼接多个变量或带条件时容易漏掉~""
比如动态切换主题图标：@theme: "dark"; @name: "logo";，下面写法是错的：
// ❌ 错误：变量不会被解析
background-image: url("@{base-path}/@{theme}/@{name}.png");
正确写法必须全部包进~""：
立即学习“前端免费学习笔记（深入）”；
// ✅ 正确：所有变量都在一个转义字符串内
background-image: ~"url('@{base-path}/@{theme}/@{name}.png')";
- 每个拼接项都得在同一对
~""里，拆成多个~""会断开字符串 - 如果路径含特殊字符（如
&、=），需确保URL编码已由后端或构建工具处理，Less不做编码
Webpack/Vite项目里路径别名不自动生效
Less本身不知道@/assets这种别名，它只认文件系统真实路径。如果你在less-loader或vite-plugin-less里配了paths，变量仍需指向相对或绝对物理路径：
// ✅ 假设 src/assets/images 是实际目录，这样配 @base-path: "../assets/images"; // 相对于当前less文件位置 // ❌ 不要写成 @base-path: "@/assets/images"; // Less不认识@别名
更稳的做法是：在构建配置中把src加进paths，然后变量用相对路径补全，而不是指望Less解析模块别名。
~""的位置、引号嵌套、构建环境路径映射这三点，任何一个出错都会让背景图变404。 
