less中路径解析失败的根本原因是less-loader不走webpack的resolve.alias，必须加~前缀才能触发模块解析；@import和url()默认按文件系统相对路径查找，漏掉~会导致404。
Less 文件里路径写错不是语法问题，是构建链路没对齐——less-loader 不走 Webpack 的 resolve.alias，url() 和 @import 默认按文件系统相对路径找，而你写的 @/styles/vars.less 或 ./assets/logo.png 实际根本不存在于那个目录下。
Less @import 加 ~ 才能识别 Webpack alias
@import 语句里的路径，Less 编译器原生只认真实文件路径。Webpack 的 @ → src/ 别名是 JS 模块解析层的机制，less-loader 默认不接入它。
- 错误写法：
@import "@/styles/vars.less";→ 报错'@/styles/vars.less' wasn't found - 正确写法：
@import "~@/styles/vars.less";，~是less-loader识别的信号，触发 Webpack 模块解析 - 如果配置了
lessOptions.paths（如[path.resolve(__dirname, "src/styles")]），可简写为@import "~vars.less"; - 漏掉
~就等于让 Less 去当前.less文件所在目录下找@/styles/子目录，必然 404
Less 中 url() 路径必须加 ~ 或用 resolve-url-loader
background-image: url('./assets/logo.png'); 在 Less 里编译失败，不是路径写错了，而是 css-loader 默认把 url() 当作绝对路径处理，且不自动解析 . 和 ..。
- 方案一（推荐）：
background: url('~@/assets/logo.png');，交由 Webpack 解析，和@import同理 - 方案二：在
less-loader前插入resolve-url-loader，它能重写url()中的相对路径（注意顺序：resolve-url-loader→css-loader→less-loader） - 方案三（临时）：
background: url('\./assets/logo.png');，用反斜杠转义点号，仅适用于单层相对引用，不推荐长期使用 - 严禁混用：
url('~@/assets/@{name}.png')中的@{name}在~""内不展开，会原样输出，必 404
less-loader 必须配 lessOptions.javascriptEnabled（尤其用 antd）
Ant Design 的 Less 主题文件大量依赖内联 JS（比如 .bezierEasingMixin()），不启用 JS 解析能力，less-loader 直接报错或静默跳过。
-
less-loader@7.x+（Webpack 5+）必须写成：{ lessOptions: { javascriptEnabled: true } } -
less-loader@5.x（Webpack 4）仍支持{ javascriptEnabled: true }，但已废弃 - 漏装
less包也会触发同款报错：Cannot find module 'less'，必须npm install less --save-dev - 别名
~antd需额外配置：resolve.alias和lessOptions.paths都要包含node_modules，否则@import '~antd/es/style/themes/index.less'仍失败
CSS Source Map 行号跳转错位的根因与修复
Less 编译后点击 CSS 行号跳不到源码，90% 是 Source Map 映射链断裂，不是编辑器或浏览器问题。
-
less-loader、css-loader、MiniCssExtractPlugin三者都必须显式设sourceMap: true，缺一不可 - 用了
MiniCssExtractPlugin？必须加publicPath: ''，否则sourceMappingURL写成绝对路径（如/css/app.css.map），部署在子路径时直接 404 - 验证方式：手动
curl http://localhost:8080/app.css.map，检查 JSON 合法、sources字段非空，且每个 source 路径能被curl -I返回 200 -
sources里出现webpack:///./src/xxx.less这类协议路径，VS Code 无法定位——它需要真实可访问的 HTTP 路径
真正麻烦的从来不是怎么写路径，而是变量拼接（url('@{img-path}logo.png')）、构建重写（~）、部署结构（publicPath）三者必须严丝合缝；任何一环错位，就 404，且错误信息几乎不提示具体哪一环断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
