Webpack 5 中 use 数组从右向左执行，必须写为 ['style-loader', 'css-loader']：css-loader 先解析 @import、url() 等语法并转成 JS 模块，style-loader 再将其注入 ；若顺序颠倒，style-loader 将收到未解析的原始 CSS 字符串，因缺少 toString() 方法或模块依赖而报错。
Webpack 5 默认不处理 .css 文件，不配 css-loader 和 style-loader，import './index.css' 会直接报 Module parse failed: Unexpected token。核心不是“装没装”，而是链路是否完整、顺序是否正确、环境是否匹配。
css-loader 和 style-loader 的执行顺序为什么必须是 ['style-loader', 'css-loader']
Webpack 的 use 数组从右向左执行：css-loader 先解析 @import、url('./logo.png') 等语法，把 CSS 转成 JS 模块（含资源依赖）；style-loader 再把该模块内容注入 生成 <style></style> 标签。
如果写成 ['css-loader', 'style-loader']：
-
style-loader收到的是原始 CSS 字符串，里面还有未解析的url(./icon.svg) - 它尝试调用
toString()处理，但原始字符串没有这个方法 → 报Cannot read property 'toString' of undefined - 或者
css-loader根本没运行，url()路径没被识别为模块 →Can't resolve './xxx'
正确写法只有一种：use: ['style-loader', 'css-loader']。
立即学习“前端免费学习笔记（深入）”；
开发环境热更新失效或控制台报 insert 相关错误
这是 style-loader 版本与 Webpack 5 不兼容的典型表现。v2.x 及更早版本不支持 Webpack 5 的 ModuleGraph 新 API，loader 实例化时拿不到 insert 函数引用。
- 升级到
style-loader@3.3.0+（当前稳定版），它明确声明支持 Webpack 5 - 删掉
node_modules重装，避免残留旧版本缓存 - 检查配置里是否误写了过时的
options: { injectType: 'singleton' }—— v3 已改用injectType: 'auto'或'styleTag' - 别在同一个
rule里混用style-loader和MiniCssExtractPlugin.loader，HMR 会冲突
生产环境样式闪屏（FOUC）怎么解决
开发时用 style-loader 是为了热更新快；但上线后 JS 加载完才插入 <style></style>，页面先白屏再渲染，用户能明显感知“闪”。
- 必须换掉
style-loader，改用MiniCssExtractPlugin.loader - 安装插件：
yarn add mini-css-extract-plugin -D - 替换 loader：
use: [MiniCssExtractPlugin.loader, 'css-loader'] - 注册插件：
plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' })] - 关键限制：
MiniCssExtractPlugin.loader在mode: 'development'下会报错，必须用process.env.NODE_ENV === 'production'动态切换 loader 数组
CSS Modules 开启后全局样式失效或类名不哈希
css-loader 默认不启用 CSS Modules。只有显式配了 modules: true，且文件名匹配 /\.module\.css$/，才会走模块逻辑。
- 如果你
import styles from './Button.module.css'却拿不到styles对象，说明css-loader没开modules - 正确写法：
{ loader: 'css-loader', options: { modules: true } } - 更安全的做法：单独配一条
test: /\.module\.css$/规则，只对这类文件启用模块化，避免误伤reset.css这类全局样式 - v6+ 默认
modules: false（v5 是true），升级后容易漏配导致样式丢失
路径解析、@import 失效、图片 404 这些问题，根源往往不在 css-loader 本身，而在它上下游的衔接是否到位——比如缺 asset-module 处理图片，或 importLoaders 没设对导致 @import 'reset.css' 没走 PostCSS。这些细节一旦漏掉，错误信息看起来都像 CSS 加载器的问题，其实只是链条断了一环。
