必须配对使用css-loader和style-loader且顺序为['style-loader','css-loader']，因Webpack从右向左执行：css-loader先解析@import/url()为模块依赖，style-loader再将结果注入DOM；否则会报Module parse failed或样式不生效。
必须配对使用 css-loader 和 style-loader，且顺序不能颠倒——否则 CSS 不会出现在页面上，甚至直接报错。
为什么 import './index.css' 会报 Module parse failed
Webpack 默认只解析 JS，遇到 .css 文件就当语法错误扔掉。它根本不知道这是个样式文件，更不会去调用任何 loader。你得显式告诉它：“所有 .css 后缀的文件，交给 css-loader 处理”。但光有 css-loader 还不够——它只把 CSS 字符串转成 JS 模块对象，不负责塞进 DOM。
- 没装
style-loader或css-loader：执行yarn add -D style-loader css-loader -
module.rules里压根没写test: /\.css$/规则：Webpack 就当这个文件不存在 - 规则写了但
use是空数组，或只写了css-loader：样式解析了，但没人把它插进<head>
style-loader 和 css-loader 的执行顺序为什么必须是 ['style-loader', 'css-loader']
Webpack 的 use 数组从右往左执行：css-loader 先处理 @import、url(./logo.png)，把路径转成模块依赖；style-loader 再接收已解析完的 CSS 内容，生成 <style> 标签并插入 DOM。
- 顺序反了（比如
['css-loader', 'style-loader']）：style-loader收到的是原始字符串，里面还有未解析的url(./logo.png)，它不处理路径，直接抛Cannot read property 'toString' of undefined - 想加其他 loader（如
postcss-loader）：放在css-loader左边，即['style-loader', 'css-loader', 'postcss-loader']
开发环境热更新失效，怎么快速修复
默认 injectType: 'styleTag' 在 HMR 场景下有时会卡住，旧样式残留、新样式不生效。这不是 bug，是注入机制和热替换生命周期不完全对齐导致的。
立即学习“前端免费学习笔记（深入）”；
- 改用
injectType: 'singletonStyleTag'：所有 CSS 合并在一个<style>标签里，HMR 替换时只需更新这一个节点 - 配置示例：
use: [ { loader: 'style-loader', options: { injectType: 'singletonStyleTag' } }, 'css-loader' ] - 别在生产环境用这个模式：它依赖 JS 运行时动态更新，不利于 SSR 或首屏性能优化
容易被忽略的关键点
style-loader 只在运行时起作用——它生成的 <style> 标签不会出现在构建产物 HTML 文件里，而是由 JS 插入。这意味着：服务端渲染（SSR）时它不生效；没有 JS 执行的环境（如禁用 JS 的浏览器）也不会有样式；如果你用 mini-css-extract-plugin 提取 CSS 到单独文件，那 style-loader 就不该出现在生产环境的 use 链里。
