如何在Webpack5中处理css引入_利用css-loader与style-loader插件-css教程-PHP中文网

必须是['style-loader', 'css-loader']，因为Webpack的use数组从右到左执行：css-loader先解析@import/url()为模块依赖，style-loader再将CSS注入标签；顺序颠倒会导致路径未解析而报错。

如何在webpack5中处理css引入_利用css-loader与style-loader插件

Webpack 5 默认不识别 .css 文件，直接 import './index.css' 会报 Module parse failed: Unexpected token。必须配 css-loader 和 style-loader，且顺序不能错。

为什么 use 数组里必须是 ['style-loader', 'css-loader']？

Webpack 的 use 数组执行顺序是从右到左：先走 css-loader，再走 style-loader。css-loader 负责解析 @import、url(./logo.png) 等语法，把它们转成模块依赖；style-loader 才负责把最终的 CSS 字符串塞进标签注入 DOM。

如果写成 ['css-loader', 'style-loader']：

style-loader 先收到原始 CSS 文本（含未解析的 url(./logo.png)）
它不会处理路径，直接传给浏览器，结果报错：Module not found: Error: Can't resolve './logo.png'
甚至可能抛出 TypeError: Cannot read property 'toString' of undefined

开发环境 vs 生产环境该用哪个 loader？

开发时用 style-loader 没问题，热更新快；但生产环境别让它把 CSS 打进 JS bundle 里——体积大、无法缓存、CDN 分发困难。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

开发环境：保持 ['style-loader', 'css-loader']
生产环境：换成 MiniCssExtractPlugin.loader，配合 css-loader，输出独立 .css 文件
别在同一个 rule 里混用 style-loader 和 MiniCssExtractPlugin.loader，否则 HMR 失效或页面全刷
推荐用 process.env.NODE_ENV === 'production' 动态切换 use 数组

用了 CSS Modules 却没生效？检查这几点

CSS Modules 不是全局开关，它只对启用了 modules: true 的 css-loader 规则生效，而且默认只匹配 *.module.css（v6+ 启用 modules.auto）。

普通 .css 文件默认不开启 Modules，类名仍是全局的
想局部化，要么改文件名为 Button.module.css，要么显式配置 { loader: 'css-loader', options: { modules: true } }
启用后，JS 中必须用 import styles from './Button.module.css'，再通过 styles.btn 访问类名
或内联 style 标签完全绕过 css-loader，不受 Modules 影响

style-loader 的 injectType 选项容易被忽略

默认 injectType: 'styleTag' 是每引入一个 CSS 模块就建一个标签，适合开发调试；但频繁插入/删除会影响性能，且 source map 不准。

singletonStyleTag：所有样式合并到单个标签，减少 DOM 操作，但 source map 失效
lazyStyleTag：样式不自动注入，需手动调用 styles.use()，适合按需加载场景
Webpack 5 下若看到 Cannot read property 'insert' of undefined，大概率是用了过时的 injectType: 'singleton'（v3 已弃用）

真正难搞的是 loader 链和环境切换的耦合点——比如忘了关掉开发环境的 style-loader 就切到生产构建，或者误把 MiniCssExtractPlugin.loader 放进 dev server 的 rule 里，结果样式全丢，还查不出原因。