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 缺失、被跳过、或 options.url 被设为 false，url('./logo.png') 就会被当作文本字面量原样保留——后续阶段找不到对应模块，立刻抛出 Can't resolve './logo.png'。
常见错误配置：
-
use: ['style-loader', 'css-loader']✅ 正确：css-loader在后，负责解析 -
use: ['css-loader', 'style-loader']❌ 错误：css-loader先执行但输出 JS 模块，style-loader无法消费 - 只配了
style-loader，漏掉css-loader→ 直接不识别url()
@import 和 url() 的路径基准完全不同
@import "reset.css" 和 background: url('./img.png') 看似都是相对路径，但解析基准根本不同：
-
@import：由 Less/Sass 编译器按当前.less/.scss文件位置解析 -
url()：由css-loader解析，但默认以 Webpack 的context（通常是项目根目录）为基准，不是 CSS 文件所在目录
结果就是：你在 src/styles/main.scss 里写 url('./assets/logo.png')，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 处理”。缺它就走文件系统相对路径，必然崩。
MiniCssExtractPlugin 的 publicPath 决定最终 URL 层级
CSS 被抽离到 dist/css/app.css，图片在 dist/images/logo.png，那 CSS 里必须生成 url(../images/logo.png) 才能正确访问。这个层级关系不是靠猜，而是由 MiniCssExtractPlugin.loader 的 options.publicPath 控制。
关键点：
- 这个
publicPath不是output.publicPath，也不是url-loader的publicPath - 它必须匹配 CSS 文件在部署时相对于资源目录的层级。例如 CSS 在
/css/、图片在/images/，就设publicPath: '../' - 如果部署在子路径（如
/my-app/），且 CSS 地址是/my-app/css/app.css，那publicPath应设为'../../'或配合output.publicPath: '/my-app/'
最易忽略的是：这个 publicPath 必须显式写在 MiniCssExtractPlugin.loader 的 options 里，而不是外层 rule 的 options；且一旦用了提取插件，url-loader 自己的 publicPath 就不再起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
