Webpack不识别.css文件，需配置css-loader和style-loader成对使用且顺序为['style-loader', 'css-loader']；生产环境应替换为MiniCssExtractPlugin.loader以抽离CSS；启用CSS Modules需设置css-loader的modules选项并改用import styles from './file.css'方式导入。
Webpack本身不认.css文件，直接import './style.css'会报错Module parse failed: Unexpected token——这不是你代码写错了，是loader没配全或顺序错了。
css-loader 和 style-loader 必须成对出现，且顺序不能颠倒
css-loader负责解析@import、url()、处理相对路径，把CSS转成JS模块；style-loader负责把那个模块插入到<head>里的<style>标签中。二者缺一不可，且执行顺序是“从右往左”，所以配置里必须写成：['style-loader', 'css-loader']，不是反过来。
- 只配
style-loader不配css-loader→ 报Unexpected token - 顺序写成
['css-loader', 'style-loader']→ 样式不生效，因为css-loader输出的是JS对象，style-loader收不到可注入的内容 - 开发环境用这个组合没问题，热更新正常，样式即时生效
生产环境必须换 MiniCssExtractPlugin.loader
style-loader在上线后会导致FOUC（样式闪动），且CSS和JS打包在一起，无法被浏览器单独缓存。此时必须用MiniCssExtractPlugin.loader替代style-loader，把CSS抽成独立.css文件，通过<link>引入。
- 先安装：
npm install --save-dev mini-css-extract-plugin - 在
webpack.config.js的plugins里加：new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' }) -
module.rules中对应项改为：[MiniCssExtractPlugin.loader, 'css-loader'] - 注意：
MiniCssExtractPlugin.loader不能在mode: 'development'下使用，否则报Chunk.entryModule is not available
想用 CSS Modules？别漏掉 modules 配置
启用CSS Modules不是靠文件名后缀或额外插件，而是靠css-loader的modules选项。但光开选项不够，导入方式也得改。
立即学习“前端免费学习笔记（深入）”；
- 配置示例：
{ loader: 'css-loader', options: { modules: true } } - 普通导入
import './Button.css'→ 不启用模块逻辑，类名不哈希化 - 模块化导入
import styles from './Button.css'→ 才会生成styles.button这样的局部作用域类名 - 搭配
postcss-loader时，顺序必须保持：[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']，否则importLoaders失效
处理 Sass/Less？加一层预处理器 loader 就行
Webpack对预处理器没有特殊要求，只要在css-loader之前再塞一个对应的编译loader即可，顺序链不能断。
- Sass：
['style-loader', 'css-loader', 'sass-loader']，需装sass（新版推荐）或node-sass（旧版） - Less：
['style-loader', 'css-loader', 'less-loader']，需装less - Stylus：
['style-loader', 'css-loader', 'stylus-loader']，需装stylus - 所有预处理器loader都必须放在
css-loader前面，否则css-loader读到的是未编译的@mixin或@function语法，直接报错
最容易被忽略的点：loader顺序是执行时的顺序，不是书写顺序；而use数组是从右往左执行——这个反直觉规则，踩一次坑就记一辈子。
