css-loader不处理url()会导致“can't resolve”错误，因其必须将url()转换为webpack模块依赖；若缺失、顺序错误（如置于style-loader之后）或未启用url选项，路径将被跳过，webpack无法识别而报错。
css-loader 不处理 url() 就会直接报 “Can’t resolve”
Webpack 本身不理解 CSS 语法，url() 这类声明必须由 css-loader 解析并转换成模块依赖。如果 css-loader 缺失、配置顺序错误（比如写在 style-loader 后面），或者被其他 loader 拦截，url('./xxx.png') 就会被当成字面量跳过——Webpack 在后续阶段发现没生成对应模块，就抛出 Can't resolve './xxx.png'。
常见错误配置：
-
use: ['style-loader', 'css-loader']✅ 正确：css-loader 在后，负责解析 -
use: ['css-loader', 'style-loader']❌ 错误：css-loader 先执行但输出 JS 模块，style-loader 无法消费 - 漏掉
css-loader，只配了style-loader→ 直接不识别url()
@import 和 url() 的路径基准根本不同
@import "reset.css" 和 background: url('./img.png') 看似都是相对路径，但解析基准完全不同：
-
@import：Less/Sass 编译器按 当前 .less/.scss 文件位置 解析路径 -
url()：由css-loader解析，但默认按 入口 JS 文件所在目录（即context）为基准，不是 CSS 文件位置 - 结果就是：同一个
./assets/logo.png，在src/styles/main.less里写，Webpack 却去src/下找
这不是 bug，是设计使然——CSS 作为模块被 JS 引入，它的资源依赖理应和 JS 模块对齐。
别名（如 @/）在 CSS 里必须加 ~ 才生效
@import "@/styles/vars.less" 或 url('@/assets/icon.svg') 必定失败，因为 Less/Sass 编译器和 css-loader 都不识别 Webpack 的 resolve.alias。只有加 ~ 前缀，才能触发 Webpack 模块解析流程：
- ✅
@import "~@/styles/vars.less" - ✅
background: url('~@/assets/logo.png') - ❌
@import "@/styles/vars.less"→ 报'@/styles/vars.less' wasn't found - ❌
url('@/assets/logo.png')→ 被当字面量，404
~ 是 css-loader 和 less-loader 约定的信号，表示“请交由 Webpack resolver 处理”，缺它就走文件系统相对路径，必然崩。
第三方 CSS（如 reset.css）里的相对 url() 更容易翻车
你 @import 一个外部 CSS 文件，它内部有 url('../fonts/foo.woff')，这个 ../ 是相对于那个外部 CSS 文件的位置。但 Webpack 加载它时，是以你的 JS 入口为 context，所以 ../fonts/ 会错位到完全无关的目录。
可靠解法只有两个：
- 用
postcss-import替代原生@import，它统一走 Webpack resolver，支持~和别名 - 在
css-loader配置中设importLoaders: 1（或更高），确保嵌套的@import也被递归处理
硬改第三方 CSS 里的路径不是长久之计；靠 resolve-url-loader 补救也容易和 sourcemap 冲突——最稳的，还是让所有路径都进 Webpack 模块系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
