css-loader 需与 style-loader 或 minicssextractplugin.loader 配合使用，且 rules 中 test、use 顺序、参数（如 modules、importloaders）必须正确配置，否则 import css 会报错或失效。
css-loader 不是“自动让 CSS 可以 import”的开关，它必须和 style-loader（或 MiniCssExtractPlugin.loader）配合，并且顺序、匹配规则、参数都得对，否则 import './index.css' 直接报错或样式不生效。
为什么 import './xxx.css' 报 Module parse failed？
Webpack 默认只解析 JavaScript，.css 文件根本不在识别范围内。没配 css-loader，就等于没告诉 Webpack “这个文件要当模块处理”。
- 必须在
module.rules里加一条test: /\.css$/i的规则 -
use数组必须包含css-loader，且它得在style-loader右侧（即['style-loader', 'css-loader']）——因为 Webpack 从右往左执行：先由css-loader解析@import和url(./logo.png)成模块依赖，再由style-loader注入 DOM - 如果只写
loader: 'css-loader'（单字段写法），不支持链式调用，会静默失效
用了 CSS Modules 却类名没变？
CSS Modules 不是全局功能，它只对显式启用 modules: true 的 rule 生效，而且默认不匹配普通 .css 文件（v6+ 启用 modules.auto 后也只认 *.module.css）。
- 错误做法：统一用
test: /\.css$/+modules: true→ 所有.css都哈希化，body、reset.css全挂掉 - 正确做法：拆成两个 rule：
{ test: /\.module\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: true } }] }{ test: /\.css$/, exclude: /\.module\.css$/, use: ['style-loader', 'css-loader'] } - JS 中必须用
import styles from './Button.module.css'，再通过styles.btn访问；import './Button.css'仍走全局流程
生产环境样式全打进 JS bundle？
style-loader 在生产环境会把 CSS 字符串塞进 JS，导致首屏 FOUC、无法独立缓存、CDN 分发困难。
- 开发环境保留
['style-loader', 'css-loader'] - 生产环境必须换成
[MiniCssExtractPlugin.loader, 'css-loader']，并在plugins中注册new MiniCssExtractPlugin({ filename: '[name].[contenthash:8].css' }) - 绝对不要在同一个 rule 里混用
style-loader和MiniCssExtractPlugin.loader，HMR 会失效甚至白屏 - 检查
mode：MiniCssExtractPlugin 在mode: 'development'下直接报错，不能 fallback
最容易被忽略的是 importLoaders —— 当你用了 postcss-loader 或 sass-loader，又在 CSS 里写了 @import 'reset.css'，但 reset.css 没走 PostCSS，问题就出在这里：必须设 importLoaders: 1 或更高，否则被引入的文件压根不经过前面的 loader。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
