css-loader 不负责转 base64，仅将 url() 转为 require()；真正处理资源的是后续 loader（如 url-loader 或 type: 'asset'），需确保链路连通、顺序正确且路径合法。
background-image 里的图片没转成 base64，不是 css-loader 配错了，而是它根本没把路径交到 url-loader 手里——中间链路断了。
css-loader 和 url-loader 的协作顺序不能错
css-loader 只做一件事：把 url('./icon.png') 这类写法，替换成 require('./icon.png')。它自己不读文件、不编码、不输出资源。真正干活的是后面的 url-loader（或 Webpack 5 的 asset 模块），但前提是这条 loader 链必须连通。
-
module.rules中，css-loader必须出现在url-loader规则之前——因为css-loader输出的require()调用，要靠后续规则去匹配并处理 - 如果写了两条规则：
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }和{ test: /\.(png|jpe?g)$/, use: ['url-loader'] }，这是对的；但如果把url-loader规则写在css-loader前面，就完全无效 - Webpack 5+ 用户注意：
url-loader已非必需，可用type: 'asset'替代，但需确保css-loader的url选项未被设为false，否则连require()都不会生成
url-loader 的 limit 值单位是字节，不是 KB
设 limit: 8192 是常见做法，但它对应的是 8KB，不是「8」——写成 limit: 8 就等于只处理 8 字节的文件，几乎没用；写成 limit: 1000000 则会让一张 1MB 的 JPG 直接打进 JS 包，首屏加载卡顿明显。
- 小图标类 PNG（1–5KB）设
limit: 8192足够覆盖大多数场景 - 想强制所有图片转 base64？设
limit: 0，但务必确认没有意外引入大图 - 超过 limit 时，
url-loader默认 fallback 到file-loader行为（新版已内置），无需额外安装file-loader - Webpack 5 中若用
type: 'asset'，等效配置是parser: { dataUrlCondition: { maxSize: 8192 } }
CSS 里 url() 的路径解析完全基于 CSS 文件位置
写 url('./img.png')，css-loader 会从该 CSS 文件所在目录开始找 img.png，而不是从 src 或 public 目录。路径写错，url-loader 根本收不到请求。
- 相对路径（
./logo.png）→ 查 CSS 文件同级目录 - 别名路径（
~assets/logo.png或@/images/bg.jpg）→ 依赖resolve.alias配置，例如@: path.resolve(__dirname, 'src') - 绝对路径（
/static/logo.png）→css-loader默认跳过处理，原样保留，上线后极易 404 - 调试技巧：在
css-loader配置中加url: { filter: (url) => console.log('url:', url) || true }，看哪些路径实际被传进来了
第三方 CSS 库里的 url() 很容易被忽略
像 kindeditor、highlight.js 这类库自带的 CSS，常含 url(background.png) 这种无前缀写法。一旦项目开了 CSS Modules（modules: true），css-loader 默认会把这类路径当作模块名去 node_modules 里找，结果找不到就报错。
- 解决办法之一：在
css-loader配置中加importLoaders: 1，并确保url选项未关闭 - 更稳妥的做法：用
url.filter显式放行第三方 CSS 的资源路径，例如：filter: (url, resourcePath) => !resourcePath.includes('node_modules') - 如果用了
MiniCssExtractPlugin，还要检查其publicPath是否和url-loader的publicPath冲突，导致最终路径拼错
最常被忽略的其实是路径解析上下文——你以为的「当前目录」和 css-loader 真正查找的位置，往往差着一个层级。调试时先确认 console.log 出来的 url 值，再反推文件结构，比盲目调 limit 或重装 loader 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
