webpack默认不识别.css文件，import会报错；必须配置['style-loader','css-loader']，因use从右向左执行：css-loader先解析@import/url()为模块依赖，style-loader再注入标签。
Webpack 默认完全不认识 .css 文件，import './index.css' 会直接报 Module parse failed: Unexpected token —— 不配 loader，就等于没告诉它“这个文件要当模块处理”。
为什么 import CSS 会报错或不生效？
根本原因只有三个：漏装、漏配、顺序错。
- 没装
css-loader或style-loader：执行yarn add --dev css-loader style-loader -
module.rules里没写匹配/\.css$/的规则：Webpack 就当这个文件不存在 - 写了规则但
use数组为空、只写了css-loader、或者顺序是['css-loader', 'style-loader']：前者样式不注入，后者必报Cannot read property 'toString' of undefined
style-loader 和 css-loader 的顺序为什么不能反？
Webpack 的 use 数组从右向左执行，这是硬性机制。
-
css-loader在右边：负责解析@import、url(./logo.png)，把它们转成模块依赖，让 Webpack 能继续加载图片、字体等资源 -
style-loader在左边：只接收已解析完的 CSS 字符串，动态插入<style></style>标签 - 顺序反了 →
style-loader收到原始 CSS 文本（含未解析的url(./logo.png)），它不处理路径，直接抛错或请求 404
生产环境必须换掉 style-loader，否则首屏会闪白
style-loader 把 CSS 打进 JS bundle，JS 加载完才插样式，用户会看到明显白屏（FOUC），且 CSS 无法独立缓存。
- 生产环境改用
MiniCssExtractPlugin.loader，配合css-loader - 必须在
plugins中注册new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' }) -
MiniCssExtractPlugin.loader在mode: 'development'下直接报错，不能和style-loader混在同一个 rule 里 - 推荐按环境动态切换：
use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']
CSS Modules 的类名没变？检查这三处硬约束
CSS Modules 不是全局开关，它只对显式启用的规则生效，且默认只匹配 *.module.css。
- 普通
.css文件默认不开启 Modules，类名仍是全局的 - 想局部化，要么改文件名为
Button.module.css，要么单独配 rule：{ test: /\.module\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: true } }] } - JS 中必须用
import styles from './Button.module.css'，再通过styles.btn访问；import './Button.css'仍走全局流程
最容易被忽略的是 importLoaders：用了 postcss-loader 或 sass-loader，又在 CSS 里写了 @import 'reset.css'，但没设 importLoaders: 1，被引入的文件就不会走 PostCSS 处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
