less 中 @import 和 url() 等路径需加 ~ 前缀才能被 webpack alias 解析，否则按文件系统相对路径查找导致 404；data-uri() 同理，且以被导入文件位置为基准解析，统一用 ~@/ 开头最可靠。
Less @import 里用 @/xxx.less 为什么报错
因为 Less 编译器本身不识别 @ 别名，它只认文件系统路径。Webpack 的 alias（比如 @ → src/）是 JS 模块解析层的机制，@import 进来的 Less 文件不会走那一套流程。
常见错误现象：Less resolver error: '@/styles/vars.less' wasn't found
- 必须在路径前加
~，写成@import "~@/styles/vars.less" -
~是 Webpack 给 loader 的信号：这是模块路径，请按 resolve.alias 处理 - 如果 less-loader 配了
paths（比如paths: [path.resolve(__dirname, 'src/styles')]），可简写为@import "~vars.less" - 漏掉
~就等同于让 Less 去当前 .less 所在目录下找@/styles/...子目录，自然 404
background-image: url('./xxx.png') 在 Less 里编译失败
不是路径写错了，而是 css-loader 默认把 url() 当作绝对路径处理，且不自动解析相对路径中的 . 和 ..。
错误示例：background: url('./assets/logo.png'); → 编译时报 “Can’t resolve './assets/logo.png'”
- 方案一：加
~前缀，background: url('~@/assets/logo.png');，交由 Webpack 解析 - 方案二：用
resolve-url-loader插件，放在less-loader之前，它能重写url()中的相对路径 - 方案三：路径开头加反斜杠转义点号，
background: url('\./assets/logo.png');（仅适用于简单层级，不推荐长期使用） - 注意：
url()内部不能混用@不加~，否则和@import一样被当字面量处理
@import (css) "../reset.css" 输出后浏览器 404
这是因为 Less 编译时按 .less 文件位置解析路径，而浏览器加载 CSS 时按最终输出的 .css 文件位置解析 —— 两者基准不同。
比如 src/styles/main.less 里写 @import (css) "../assets/css/reset.css"，编译后生成 dist/css/main.css，里面仍是 @import url("../assets/css/reset.css")；浏览器就会请求 dist/assets/css/reset.css，但真实路径可能是 dist/static/css/reset.css。
- 根本解法：不用
@import (css)，改用css-loader的importLoaders配置 - 在 webpack rule 中设
options: { importLoaders: 2 }，让 css-loader 接管 Less 输出的@import语句 - 更现代的做法：弃用 Less 原生
@import，改用postcss-import，它统一处理 .css/.less 混合依赖，路径解析可靠 - 临时绕过：把 CSS 放进
public/目录，用绝对路径@import (css) "/static/reset.css"，但失去构建时校验和哈希能力
data-uri('./icon.png') 报找不到文件
Less 的 data-uri() 函数在被其他 .less 文件 @import 时，会以被导入文件（而非主入口）的位置为基准解析路径，极易错位。
典型场景：A.less 引用 B.less，B.less 里写 data-uri('./img/x.png')，Less 就去 B.less 所在目录找 ./img/x.png，而不是 A.less 的目录。
- 最稳写法：一律用
~开头，data-uri('~@/assets/img/x.png') - 避免跨文件引用含
data-uri()的 mixins，否则路径基准不可控 - 不要依赖
paths配置来“兜底”，data-uri()不走 paths 查找逻辑 - 如果必须用相对路径，确保所有含
data-uri()的文件都放在同一级目录下，且调用者与定义者路径关系固定
路径问题从来不是“写对就行”，而是“在哪解析、由谁解析、解析时上下文在哪”三个问题叠在一起。Less 本身不做模块解析，全靠构建工具补位；~ 是唯一稳定锚点，其余方案都有适用边界。别省那一个字符，加了 ~ 才算真正接入了 Webpack 的路径体系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
