import './index.css' 无样式是因为Webpack默认不识别CSS，必须配置test: /.css$/规则并按['style-loader', 'css-loader']顺序执行：css-loader先解析@import/url()为模块依赖，style-loader再将结果注入标签；顺序颠倒或缺失任一环节均导致报错或白屏。
Webpack 5 里 style-loader 不是“配了就能用”，而是必须和 css-loader 配合、顺序不能错、环境不能混，否则直接白屏或报错。
为什么 import './index.css' 后页面没样式？
Webpack 默认只认 JS，遇到 CSS 就当语法错误扔掉——它根本不会触发 style-loader，除非你显式告诉它：“这个文件要走 style-loader + css-loader”。漏掉任意一项都会失败：
-
css-loader没装：执行yarn add --dev css-loader style-loader -
module.rules里没写test: /\.css$/：Webpack 根本看不到这个文件 - 写了规则但
use是空数组，或只写了'css-loader'：缺少style-loader，CSS 解析完也不会进 DOM -
use顺序写成['css-loader', 'style-loader']：必报Cannot read property 'toString' of undefined或Can't resolve './logo.png'
loader 顺序为什么必须是 ['style-loader', 'css-loader']？
Webpack 的 use 数组从右向左执行。顺序颠倒不是“效果不好”，而是根本跑不起来：
-
css-loader先处理：把@import、url(./icon.svg)转成模块依赖，输出纯 CSS 字符串 -
style-loader再接手：把上一步的字符串动态插入<style></style>标签 - 如果反过来，
style-loader收到的是含原始路径的文本，它不解析路径，直接崩
✅ 正确：use: ['style-loader', 'css-loader']
❌ 错误：use: ['css-loader', 'style-loader'] 或 loader: 'style-loader'（单 loader 写法不支持链式）
立即学习“前端免费学习笔记（深入）”；
开发环境插入位置能自定义吗？
能，但默认行为已够用；改之前先确认真有需要。常用配置项都通过 options 传入：
-
insert：控制插入位置，默认'head'，可设为'body'或函数，比如insert: '#app' -
injectType：默认'styleTag'（每个 CSS 模块建一个<style></style>），如需合并可用'singletonStyleTag' -
attributes：加自定义属性，例如{ id: 'my-styles' }，方便后续 JS 控制
示例：{ loader: 'style-loader', options: { insert: 'body', attributes: { id: 'app-styles' } } }
生产环境千万别用 style-loader
它把 CSS 打进 JS bundle，JS 加载完才插样式，用户会看到明显白屏（FOUC），且 CSS 无法独立缓存。上线前必须换掉：
- 用
MiniCssExtractPlugin.loader替代style-loader，配合css-loader - 必须用
process.env.NODE_ENV === 'production'动态切换，不能依赖 Webpack 的mode字段（它对 loader 行为无影响） - 别把两个 loader 写在同一个 rule 里，否则 HMR 失效、全页刷新，甚至报
Cannot use [MiniCssExtractPlugin] plugin as it provides no runtime
真正容易被忽略的是：开发时用 style-loader@3.3.0+，旧版 v2.x 在 Webpack 5 下会丢掉 insert 函数，导致样式不渲染——检查版本比调参数更重要。
