css-loader 默认不解析 @import/url()，需启用 import/url 选项或配合 postcss-import；modules 配置影响 CSS Modules 行为，TS 项目须设 exportLocalsConvention；它仅解析 CSS，注入/抽离由 style-loader 或 mini-css-extract-plugin 完成；SourceMap 需全链路开启才准确定位。
css-loader 为什么解析不了 @import 或 url()？
默认情况下 css-loader 不处理 @import 和 url() 中的路径，它只做 CSS 模块化和局部作用域转换。真正解析这些语句的是 resolve-url-loader 或更常见的——靠 postcss-loader + postcss-import，或者干脆交给 css-loader 自己的 import 和 url 选项。
实操建议：
- 检查是否启用了
import和url选项（v6+ 默认开启，但 v5 及以前默认false） - 若用相对路径如
@import "./vars.css";，确保路径相对于当前 CSS 文件，不是 Webpack 入口 - 遇到
Module not found: Error: Can't resolve './xxx.css'，大概率是路径没对上，别急着加alias，先用resolve.alias看是否影响了 CSS 解析上下文
css-loader 的 modules 配置怎么选：true、'local' 还是对象？
modules 控制 CSS Modules 行为，不同写法差异很大，不是“开了就自动局部作用域”。
常见错误现象：className 没变哈希、样式全局泄漏、TS 类型报错 Property 'xxx' does not exist on type。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
modules: true→ 等价于modules: { mode: 'local' }，适用于普通项目 - 想局部作用域但保留部分全局类（比如第三方 UI 库），用
modules: { mode: 'pure' }或配合auto正则匹配文件名 - TS 项目必须配
modules: { exportLocalsConvention: 'camelCaseOnly' }，否则styles.redButton会变成styles['red-button'] - 别在同一个项目里混用
modules: true和modules: { ... }，Webpack 不会合并配置，后写的会覆盖前的
css-loader 和 style-loader / mini-css-extract-plugin 怎么协作不翻车？
css-loader 只负责解析 CSS 文本和依赖，它不插入 DOM，也不输出文件。谁干这事？style-loader 把 CSS 注入 标签；mini-css-extract-plugin 则抽成独立 .css 文件。两者不能共存于同一 rule。
使用场景：
- 开发环境用
style-loader：热更新快、调试直观 - 生产环境必须换
mini-css-extract-plugin.loader，否则 CSS 被打包进 JS，首屏阻塞严重 - 如果看到
Cannot use [name] in extract mode错误，说明你写了filename: '[name].css'但没给mini-css-extract-plugin实例传filename选项 - 注意
css-loader的exportType（v6+）会影响style-loader接收的数据格式，设成'string'最稳
SourceMap 总对不上行号？css-loader 的 sourceMap 选项要和谁对齐？
css-loader 的 sourceMap 开关只是“是否生成 CSS 源映射”，它本身不决定最终能否跳转到原始 Sass/Less 文件。真要精准定位，得整条链都支持：预处理器 loader → css-loader → postcss-loader → style-loader 或 mini-css-extract-plugin。
容易踩的坑：
-
css-loader设了sourceMap: true，但sass-loader没开sourceMap: true，结果只能跳到编译后的 CSS，不是 .scss - Webpack 配置里
devtool设成'eval'或'cheap-module-eval-source-map'，会吞掉 CSS SourceMap，改用'source-map'或'inline-source-map' - Vue CLI 或 Create React App 封装了默认配置，别直接改
css-loader选项，优先走它们暴露的configureWebpack或chainWebpackAPI
复杂点在于，每个 loader 对 SourceMap 的处理粒度不同，哪怕全开了，Sass 嵌套层级深时，行号偏移仍可能有 1–2 行。这不是 bug，是多层转换的固有损耗。
