Webpack 5 默认不识别.css文件，必须配置['style-loader', 'css-loader']才能正常加载：css-loader解析@import/url()为模块依赖，style-loader注入标签；顺序颠倒必报错，生产环境须换MiniCssExtractPlugin.loader以避免FOUC和缓存问题。
Webpack 5 默认完全不识别 .css 文件，import './index.css' 会直接报 Module parse failed: Unexpected token —— 不配 css-loader 和 style-loader，就根本跑不起来。
为什么只写 css-loader 还是没样式？
css-loader 的作用只是让 Webpack 能“读懂” CSS：解析 @import、url(./logo.png)，把它们转成模块依赖（比如变成 require('./logo.png')）。它不负责把样式插进页面。
- 只配
use: ['css-loader']→ 打包成功但页面空白，无报错，极难排查 - 漏装
style-loader或没写进use数组 → 样式不会注入 - 用单字段写法
loader: 'css-loader'→ 不支持链式调用，style-loader完全不执行
style-loader 和 css-loader 的顺序为什么不能颠倒？
Webpack 的 use 数组从右向左执行。顺序错了，style-loader 就会收到原始 CSS 文本（含未解析的 url(./icon.svg)），而它根本不处理路径。
- ✅ 正确：
use: ['style-loader', 'css-loader']→css-loader先解析，再由style-loader注入<style></style> - ❌ 错误：
use: ['css-loader', 'style-loader']→ 报Can't resolve './icon.svg'或Cannot read property 'toString' of undefined - ⚠️ 注意：
use是数组，不是对象；别用loader字段替代
生产环境必须换掉 style-loader，否则首屏闪白
style-loader 把 CSS 打进 JS bundle，JS 加载完才插入样式，用户会看到明显白屏（FOUC），且 CSS 无法独立缓存。
立即学习“前端免费学习笔记（深入）”；
- 生产环境改用
MiniCssExtractPlugin.loader，配合css-loader - 必须在
plugins中注册new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' }) -
MiniCssExtractPlugin.loader在mode: 'development'下直接报错，不能和style-loader混在同一个 rule 里 - 推荐动态切换：
use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']
CSS Modules 开启后类名没变？检查这三处硬性约束
CSS Modules 不是全局开关，它只对显式启用的规则生效，且默认只匹配 *.module.css（v6+ 启用 modules.auto 后也仅限该命名）。
- 普通
.css文件默认不开启 Modules，类名仍是全局的 - 想局部化，要么改文件名为
Button.module.css，要么单独配 rule：{ test: /\.module\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: true } }] } - JS 中必须写
import styles from './Button.module.css'，再通过styles.btn访问；import './Button.css'仍走全局流程 - 第三方库（如 Ant Design）的 CSS 必须关 Modules，否则选择器根本匹配不上
最容易被忽略的是 importLoaders：当你加了 postcss-loader 或 sass-loader，又在 CSS 里写了 @import 'reset.css'，但 reset.css 没走 PostCSS —— 那就得在 css-loader 的 options 里设 importLoaders: 1（或对应数字）。
