webpack默认不识别.css文件，import会报错；必须配置['style-loader', 'css-loader']，因use从右向左执行：css-loader先解析@import/url()为模块依赖，style-loader再注入标签。
Webpack 默认完全不认识 .css 文件，直接 import './index.css' 会立刻报错：Module parse failed: Unexpected token。必须配 css-loader 和 style-loader，且顺序不能错——这是最常卡住人的第一步。
为什么 use 数组必须是 ['style-loader', 'css-loader']？
Webpack 的 use 数组执行顺序是从右到左：css-loader 先处理，把 @import、url(./logo.png) 这些语法转成模块依赖；再交给 style-loader 把最终的 CSS 字符串注入 <style></style> 标签。
如果写成 ['css-loader', 'style-loader']：
-
style-loader先收到原始 CSS 文本（含未解析的url(./logo.png)） - 它不解析路径，直接传给浏览器，结果报
Can't resolve './logo.png' - 甚至抛出
TypeError: Cannot read property 'toString' of undefined
开发环境能用 style-loader，但别在生产环境硬扛
style-loader 在开发时热更新快，没问题；但上线后所有 CSS 都打进 JS bundle，会导致两个严重问题：
- 首屏白屏后突然“闪”出样式（FOUC）
- CSS 无法独立缓存，JS 更新一次，整个样式也得重下
生产环境必须换掉它：
- 安装：
yarn add mini-css-extract-plugin -D - loader 替换：
use: [MiniCssExtractPlugin.loader, 'css-loader'] - 插件注册：
plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' })] - 关键限制：
MiniCssExtractPlugin.loader在mode: 'development'下直接报错，不能和style-loader混在同一个 rule 里
用了 CSS Modules 却没生效？检查这三处
css-loader 的 modules 不是全局开关，它只对显式启用的规则生效：
- 普通
.css文件默认不开启 Modules，类名仍是全局的 - 想局部化，要么改文件名为
Button.module.css，要么在 rule 中写成对象：{ loader: 'css-loader', options: { modules: true } } - 启用后，JS 中必须用
import styles from './Button.module.css'，再通过styles.btn访问类名；import './Button.css'仍走普通流程 -
<link rel="stylesheet">或内联style完全绕过css-loader，不受 Modules 影响
常见报错不是 css-loader 的锅，而是上下文缺了
报 Can't resolve './reset.css' 或找不到图片，大概率不是 css-loader 配错了，而是它依赖的环节没补上：
-
url(./logo.png)失败 → 缺少asset-module或url-loader配置；css-loader只解析路径，不打包资源 -
@import './reset.css'报错 → 检查css-loader的options.modules.resolve，或确认resolve.alias没误覆盖node_modules -
importLoaders参数容易被忽略：它控制被@import进来的文件，往前数几个 loader 来处理；比如配了postcss-loader，又发现reset.css没走 PostCSS，问题就在这儿
真正容易被忽略的是 style-loader 版本兼容性：Webpack 5 下必须用 style-loader@3.3.0+，旧版会报 Cannot read property 'insert' of undefined——这不是配置问题，是 loader 本身不支持新 API。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
