Webpack配置CSS加载器教程
2026-05-28 23:24:00
0浏览
收藏
本文深入解析了 Webpack 5 中 CSS 加载器配置的核心要点与常见陷阱：明确强调 `use: ['style-loader', 'css-loader']` 的严格顺序逻辑——因 Webpack 从右向左执行 loader，必须由 `css-loader` 先将 CSS 中的 `@import`、`url()` 等转为模块依赖，再由 `style-loader` 注入 DOM；顺序颠倒会导致 `toString()` 报错或路径无法解析。同时直击开发与生产环境痛点：热更新失效多因 `style-loader` 版本过低（需 ≥3.3.0），FOUC 闪屏须用 `MiniCssExtractPlugin.loader` 替代 `style-loader` 并动态切换 loader；CSS Modules 失效常源于未显式启用 `modules: true` 或规则匹配不当；而路径解析失败、图片 404 等“伪 CSS 问题”，实则暴露的是 asset 处理、`importLoaders` 或 PostCSS 链路的断裂——真正关键，永远是 loader 链路的完整性、顺序的严谨性与环境的精准适配。
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 再把该模块内容注入 生成
