less编译器不重写url()路径，浏览器始终以css文件物理位置为基准解析相对路径；需用~前缀配合webpack alias或resolve-url-loader修正路径错位问题。
因为 Less 编译器不做路径重写，url("../images/logo.png") 会被原样输出到 CSS 中；浏览器加载最终的 dist/css/app.css 时，按该 CSS 文件位置去解析相对路径，而不是按原始 .less 文件位置。
浏览器解析 url() 的基准永远是 CSS 文件物理位置
这是最常被误判的一点：你以为路径是相对于 src/styles/main.less，但浏览器只认 dist/css/app.css 所在目录。比如：
-
main.less里写background: url("../assets/img/icon.svg"); - 编译后生成
dist/css/app.css - 浏览器实际请求的是
dist/css/../assets/img/icon.svg→dist/assets/img/icon.svg - 而真实资源在
dist/static/img/icon.svg或/assets/img/icon.svg（通过public目录提供）
Less 本身不处理资源路径，只做字符串搬运
Less 不是构建工具，它不感知 Webpack alias、不重写 url()、不递归解析 @import (css) 内部的路径。所有路径都原样透传，交由后续 loader 或浏览器处理。
-
@import (css) "../reset.css"→ 输出原生@import url("../reset.css")，不会被 less-loader 修正 -
url("./icon.png")→ 输出url("./icon.png")，Webpack 不会自动把它转成模块引用 - 含中文、空格、
@的路径（如url("../组件/bg.jpg")）会在词法分析阶段直接触发ParseError: Unrecognised input
用 ~ 前缀让 Webpack 接管路径解析
~ 是 Webpack 的模块路径信号，必须配合 resolve.alias 和正确的书写格式才生效。
- ✅ 正确：
url(~"@assets/images/logo.png")（~紧贴引号内，无空格） - ❌ 错误：
url(~ "@assets/...")、url(~@assets/...)、@import (css) "@styles/reset.css"（漏~） - 别名需已配置，例如：
resolve.alias = { "@assets": path.resolve(__dirname, "src/assets") } - 不配 alias 也能用
url(~./images/logo.png)，但这是相对当前.less文件，不是项目根目录
已有大量 ../ 写法又不想改？加 resolve-url-loader
它在 less-loader 之后、css-loader 之前介入，根据输出 CSS 文件位置反向修正 url() 中的相对路径。
- 仅修正
background: url()类属性值，不处理@import (css)内部的url() - 对含中文、空格、
@的路径仍会失败，这类必须改用~""写法 - loader 链顺序必须是：
less-loader→resolve-url-loader→css-loader - Webpack 5+ 用户注意：
resolve-url-loader已停止维护，可考虑postcss-url+postcss-import替代方案
最容易忽略的其实是路径基准的“双重错位”：Less 按源文件位置解析 @import，浏览器按输出 CSS 位置解析 url()，两者之间没有任何自动对齐机制。少一个 ~、多一个空格、alias 拼错、importLoaders 漏设，都会让路径看起来对，实际请求却偏移两层目录。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
