less中url()相对路径打包后404，因编译器不重写路径，浏览器按css位置而非less源文件解析；可用~前缀交由webpack模块解析、或加resolve-url-loader反向修正，@import需加~且css-loader配置importloaders≥2。
Less里url()相对路径为什么打包后404
因为Less编译器不做路径重写，url("../images/logo.png")会被原样输出到CSS里；浏览器加载最终CSS文件时，按该CSS的存放位置（比如/css/app.css）去解析相对路径，而不是按Less源文件位置。结果就是请求/css/../images/logo.png → /images/logo.png，但图片实际在/assets/images/logo.png。
用~前缀让Webpack正确解析url()
Webpack的less-loader支持~开头的url()，表示走模块解析逻辑（类似JS里的import）。但必须满足两个条件：
-
~必须紧贴引号内，写成url(~"@assets/images/icon.svg")✅，不能是url(~ "@assets/")❌或url(~@assets/)❌ - 项目中已配置
resolve.alias，例如@assets指向src/assets - 如果没配别名，也可用
url(~./images/logo.png)，但这是相对于当前Less文件，不是项目根目录
避免改代码又想保留相对路径？加resolve-url-loader
它在less-loader之后介入，根据输出CSS文件位置反向修正url()里的相对路径。适用于已有大量url(../xxx)写法、不想逐个改的项目。
- 需在webpack配置中确保
resolve-url-loader在less-loader之后、css-loader之前 - 它不处理
@import (css)里的url()，只修正常规background: url()等属性值 - 对含
@、空格、中文的路径仍会失败，这类必须用~""转义写法
@import引入CSS时路径也错？必须加~且配importLoaders
@import (css) "../reset.css"或@import (css) "@styles/reset.css"都会失效——前者按Less文件位置解析，后者@不被识别。真正有效的只有：
-
@import (css) "~@styles/reset.css"（前提是resolve.alias已配@styles） -
@import (css) "~./reset.css"（相对当前Less文件） - 若仍404，检查
css-loader配置是否设了importLoaders: 2，否则它不会把@import (css)传给上层loader处理
最易忽略的一点：路径基准永远以文件物理位置为准，不是“你认为应该在哪”。少一个~、多一个空格、alias没生效、importLoaders漏设，都会让路径看起来对，实际请求却错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
