css-loader的url选项默认为true，仅将url()路径转为require()调用，能否成功加载取决于后续loader配置及路径合法性；相对路径需相对于CSS文件，alias路径必须加~前缀，且须有匹配图片的rule（如type: 'asset'）承接require。
css-loader 的 url 选项默认就是 true，但容易被忽略的其实是它的行为边界
Webpack v6+ 中 css-loader 默认启用 url: true，也就是说它会自动处理所有 url() 和 image-set() 里的路径。但这个“处理”不等于“一定能加载成功”——它只负责把路径转成 require() 调用，后续能否解析，取决于你有没有配对的 loader（比如 file-loader 或 url-loader）以及路径是否合法。
常见错误现象：
ERROR in ./src/styles/main.css Module not found: Error: Can't resolve './images/bg.png'- 图片在开发时显示，构建后 404
-
url(~some-pkg/icon.svg)报错找不到模块
实操建议：
- 确认你没在配置里显式写
url: false—— 这是最常见的“以为开了其实关了”的情况 - 如果用了相对路径（如
url(../assets/logo.png)），确保该路径相对于当前 CSS 文件存在，不是相对于 Webpack 入口 - 要从
node_modules或 alias 加载资源，必须加~前缀：url(~@/assets/img.png)或url(~bootstrap/scss/_variables.scss) -
url选项支持函数形式，可用于动态控制：例如只处理图片，跳过字体或 SVGurl：url: (url) => url.includes('.png') || url.includes('.jpg')
为什么加了 ~ 才能解析 alias 路径
css-loader 对路径的解析分两类：普通文件路径（不带 ~）走文件系统相对查找；带 ~ 的路径才走 Webpack 的模块解析逻辑（即 resolve.modules 和 resolve.alias）。
这意味着：
-
url(./img.png)→ 查找当前 CSS 文件同级目录下的./img.png -
url(~@/img.png)→ 经过resolve.alias['@']映射后，再按模块规则查找 -
url(@/img.png)（没波浪号）→ 当作字面路径，不会触发 alias，大概率报错
如果你的 webpack.config.js 里定义了：
resolve: { alias: { '@': path.resolve(__dirname, 'src') } }
，那 CSS 中就必须写 url(~@/assets/logo.png)，少一个 ~ 就失效。
url 解析生效但图片仍 404？检查 loader 链末端是否承接得住
css-loader 只负责把 url(...) 变成 require(...)，真正读取、处理、输出文件的是它后面的 loader（比如 file-loader 或 url-loader）。如果链中缺了它们，或者顺序错了，require 就会失败。
典型 loader 链应为：
use: ['style-loader', 'css-loader', 'file-loader']
（注意顺序是从右往左执行）
但更现代的做法是用 asset-module（Webpack 5+ 内置）替代 file-loader：
- 在
css-loader后不再显式写file-loader，而是靠 Webpack 自动处理require返回的模块 - 需确保
module.rules中有匹配图片的 rule，例如：{ test: /\.(png|jpe?g|gif|svg)$/i, type: 'asset' } - 否则
require('./x.png')会被当成 JS 模块处理，直接报错
绝对路径和根相对路径（/assets/xxx.png）会被怎么处理
v4+ 开始，css-loader 支持解析以 / 开头的“根相对路径”，但前提是它被识别为 Webpack 的上下文路径（即 output.publicPath 或 resolve.roots 中声明的路径）。
不过实践中更稳妥的方式是：
- 避免直接写
url(/assets/logo.png)—— 它可能绕过 Webpack 构建流程，变成纯静态引用，在非根部署时出问题 - 改用别名 +
~：url(~assets/logo.png)，并在resolve.alias中定义assets: path.resolve(__dirname, 'src/assets') - 若坚持用根路径，需同步配置
publicPath并确保服务器能正确服务该路径
最易被忽略的一点：即使 url: true 开着，如果图片路径本身拼写错误、大小写不符（尤其在 macOS vs Linux 构建环境间）、或文件未被 test 规则覆盖，依然会失败——css-loader 不校验文件是否存在，只管转调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
