必须配置css-loader解析.css文件并搭配style-loader注入dom，否则webpack默认无法识别css导致报错；loader顺序须为['style-loader', 'css-loader']，因执行方向从右向左。
直接 import './index.css' 报错或样式不生效，基本就是 css-loader 没配对、顺序错了，或者压根没配 style-loader。
为什么 import './xxx.css' 会报 Module parse failed？
Webpack 默认只认 JS，遇到 .css 文件直接当语法错误扔掉。必须显式告诉它：“这个后缀的文件，交给 css-loader 解析”。但光有 css-loader 不够——它只把 CSS 转成 JS 模块对象，不会自动插到页面里。
- 漏装
css-loader或style-loader：执行yarn add --dev css-loader style-loader -
module.rules里没写test: /\.css$/规则：规则不存在，Webpack 就当没看见这个文件 - 写了规则但
use数组为空或只写了css-loader：缺少style-loader，样式不会注入 DOM
loader 顺序为什么必须是 ['style-loader', 'css-loader']？
Webpack 的 use 数组从右向左执行：css-loader 先处理 @import/url()，转成模块依赖；style-loader 再把最终结果塞进 <style></style> 标签。顺序反了，style-loader 收到的是原始 CSS 字符串（含未解析的 url(./logo.png)），它不负责路径解析，直接抛 Cannot read property 'toString' of undefined。
- 正确写法：
use: ['style-loader', 'css-loader'] - 错误写法：
use: ['css-loader', 'style-loader']或loader: 'css-loader'（单 loader 写法不支持链式） - 加了
postcss-loader或sass-loader？它们得放在css-loader左边，例如['style-loader', 'css-loader', 'sass-loader']
开发用 style-loader，生产必须换 MiniCssExtractPlugin
style-loader 在开发时靠 JS 注入样式，热更新快；但上线后所有 CSS 打进 JS bundle，会导致首屏白屏、样式无法独立缓存。生产环境必须抽离为 .css 文件。
- 安装：
yarn add --dev mini-css-extract-plugin - rule 替换：
use: [MiniCssExtractPlugin.loader, 'css-loader']（注意不是style-loader） - 插件注册：
plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' })] - 关键限制：
MiniCssExtractPlugin.loader在mode: 'development'下直接报错，别和style-loader混在同一个 rule 里
CSS Modules 生效但全局样式“失色”，怎么解？
开 modules: true 后，所有匹配规则的 .css 文件都会哈希类名。如果规则写成 test: /\.css$/，连 reset.css、body { margin: 0 } 都被重命名，页面直接变白板。
- 正确做法：用两个 rule 分开处理
{ test: /\.module\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: true } }] }{ test: /\.css$/, exclude: /\.module\.css$/, use: ['style-loader', 'css-loader'] } - 文件命名约定：组件样式用
Button.module.css，全局样式用global.css - 想在模块化文件里写全局类？用
:global(.reset) { ... }包裹 - webpack 5+ 默认启用
modules.auto，只对*.module.css自动开模块化，能减少误伤
真正容易被忽略的点是：CSS Modules 不是开关一开就全局生效，它严格绑定到具体 rule 和文件后缀；而 importLoaders 这种参数，只在你用了 @import 或 PostCSS 时才冒头，平时根本感觉不到它的存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
