webpack 5 中 css-loader 和 style-loader 必须配对使用且顺序为 ['style-loader', 'css-loader']，前者注入 style 标签，后者解析 import/url；生产环境需换 mini-css-extract-plugin，开发环境禁用该插件以防报错。
webpack 5 如何正确配置 css-loader 和 style-loader
不配对使用这两个 loader，CSS 就不会进 bundle，页面必然白屏或样式丢失。css-loader 解析 @import 和 url()，把 CSS 转成 JS 模块；style-loader 把模块内容插入 的 <style></style> 标签。顺序不能反——必须 style-loader 在前（执行时在后），否则报 Module parse failed: Unexpected token。
典型配置片段：
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
}
-
css-loader开启importLoaders: 1才能链式处理@import进来的其他 CSS 或 Sass 文件 - 开发环境用
style-loader是最快反馈方式；生产环境应换为mini-css-extract-plugin，否则样式会随 JS 一起加载，阻塞渲染 - 如果用了 PostCSS，必须加在
css-loader后、style-loader前，即['style-loader', 'css-loader', 'postcss-loader']
为什么 mini-css-extract-plugin 在 dev 环境会报错
它依赖 webpack 的 chunk 分离机制，在 mode: 'development' 下默认不启用 HMR 兼容的 CSS 提取逻辑，直接用会抛 ModuleBuildError: Cannot read property 'javascript' of undefined。
- 只应在
mode: 'production'或显式启用HMR且配置loader为MiniCssExtractPlugin.loader时使用 - 开发时保留
style-loader，通过process.env.NODE_ENV动态切换 loader 链更稳妥 - 注意：该插件提取的 CSS 不带 hash，需配合
output.filename中的[contenthash]才能实现长效缓存
处理 @import 和本地字体文件时的路径陷阱
CSS 中写 @import './base.css'; 或 url('./fonts/icon.woff2')，webpack 默认按相对当前 CSS 文件解析，但一旦用了 css-loader 的 url: false 或 modules: true，路径解析规则就变了——它会尝试把路径当 JS 模块解析，结果报 Can't resolve './xxx' in 'xxx'。
立即学习“前端免费学习笔记（深入）”；
- 确保
css-loader的url选项为true（默认值），否则所有url()都被忽略 - 字体等静态资源建议统一走
asset类型 loader（如type: 'asset'），避免额外配file-loader - 如果项目有别名（
resolve.alias），CSS 里的@import 'styles/vars'不会自动识别，得用css-loader的alias选项或改用绝对路径
开启 CSS Modules 却发现全局样式失效了
开了 modules: true 后，所有类名自动加哈希，但 :global(.btn) 写法没生效？常见原因是正则匹配错误或 loader 配置未区分模块与非模块文件。
- 推荐用对象形式配置：
modules: { mode: 'local' }，再用:global{...}包裹全局块 - 若需混用，建议拆两个 rule：一个专配
/\.module\.css$/启用 modules，另一个配/\.css$/但排除module字样，保持普通 CSS 不模块化 - 注意：CSS Modules 会禁用
@import的全局合并行为，导入的变量需用:export显式导出，否则 JS 里import styles from './x.module.css'拿不到
真正麻烦的不是配置本身，而是 loader 执行顺序、模块类型判断、以及不同 mode 下插件兼容性之间的隐式耦合——调一个参数，可能要同步检查三处行为是否一致。
