Less中url()路径被错误重写，本质是构建工具（如resolve-url-loader）在后期强行修正导致错位，而非Less本身解析或重写；Less仅原样输出字符串，路径基准永远是最终CSS文件位置，非Less源文件位置。
Less中url()路径被错误重写，本质是编译器没接管路径
Less本身不解析、不重写url()里的路径，它只做字符串原样输出。所谓“被错误重写”，其实是你误以为Less会像Webpack的css-loader或Vite的CSS插件那样自动处理——但它们只在构建阶段介入，且仅对字面量路径生效。如果你看到url("../img/logo.png")变成了url("../../dist/img/logo.png")，那不是Less干的，是resolve-url-loader这类工具在后期强行修正导致的错位。
常见错误现象：
- 开发时正常，build后所有背景图404，控制台请求路径明显偏移（比如多跳了一级../）
- Less里写url('./icon.png')，产物CSS里却变成url('/assets/icon.xxxx.png')——这说明有插件在“越界”重写
- 用了~""包裹，结果路径还是错，因为~只防解析报错，不解决相对基准问题
Vite项目里Less的url()必须加~前缀才能被Vite识别
Vite默认不扫描Less文件里的裸url()，除非你显式告诉它这是模块路径。不加~，Vite就当普通字符串忽略；加了~，Vite才走resolve.alias和src/assets哈希流程。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 资源放在
src/assets下，变量定义用单引号+末尾斜杠：@img-base: '../assets/img/'; - 使用时必须写成：
background: url(~"@{img-base}logo.png");（注意~紧贴引号，无空格） - 禁止写法：
url("@{img-base}logo.png")（双引号+无~ → 不被Vite识别）、url(~@img-base)（~后不能跟变量名） - public目录资源绕过构建，直接用绝对路径：
@img-base: '/img/'; background: url('@{img-base}favicon.ico');
Webpack项目中url()路径错乱，大概率是resolve-url-loader配置不当
Webpack生态里，less-loader默认不重写url()，靠resolve-url-loader补位。但它依赖sourceMap定位原始Less路径，一旦关了sourceMap或loader顺序错了，就会把相对路径算歪。
关键检查点：
- 确保
less-loader的sourceMap设为true -
resolve-url-loader必须放在less-loader之后，且options.attempts至少为2 - 避免混用
relativeUrls: true——Less原生这个参数在Webpack里基本失效，反而干扰resolve-url-loader - 如果用了
css-loader的url: false，它会禁用所有url()处理，包括resolve-url-loader的输出
路径基准永远是最终CSS文件位置，不是Less源文件
这是最容易被忽略的底层逻辑：浏览器加载CSS后，所有url()都按该CSS文件在dist中的实际路径去解析。比如Less在src/styles/base.less，构建后CSS输出到dist/css/app.css，那么url('../assets/logo.png')就会去找dist/assets/logo.png——而不是src/assets/。
所以变量值必须手动对齐这个基准：
- 若CSS在
dist/css/，图片在dist/assets/，变量就得是@img-base: '../assets/'; - 若图片放在
public/img/，则@img-base: '/img/';（绝对路径，不依赖相对层级） - 别指望
@/assets这种别名能在Less里生效——它只对JS的import有效 - SVG fragment ID拼接也得用~：
mask: url(~"#@{icon-id}");，漏掉~或只包变量部分都会失效
