style-loader 负责将 CSS 注入 DOM，css-loader 负责解析 CSS 语法并生成 JS 模块对象；二者顺序不可颠倒，必须 css-loader 在前、style-loader 在后，且生产环境应替换为 MiniCssExtractPlugin.loader。
style-loader 与 css-loader 的职责必须分清
Webpack 本身不理解 .css 文件，必须靠 loader 转换。常见错误是只配了 style-loader 却漏掉 css-loader，结果报错 Module parse failed: Unexpected token —— 这是因为 Webpack 尝试直接解析 CSS 文本，而没经过 css-loader 处理其 @import 和 url() 等语法。
css-loader 负责解析 CSS 文件内容、处理路径引用、启用模块化（modules: true）、生成 JS 可消费的样式对象；style-loader 则负责把该对象插入到 DOM 的 <style> 标签中。
- 顺序不能颠倒：必须
style-loader在前（执行时在后），css-loader在后（执行时在前）—— 即['style-loader', 'css-loader'] -
开发环境可用此组合；生产环境建议换成
MiniCssExtractPlugin.loader替代style-loader，避免样式闪动 -
css-loader开启modules: true后，类名会默认哈希化，但需配合import styles from './Button.css'使用，否则普通import './Button.css'不会启用模块逻辑
MiniCssExtractPlugin.loader 在生产环境不可跳过
开发时用 style-loader 把样式写进 <head> 是方便热更新，但上线后它会导致 FOUC（Flash of Unstyled Content）且无法利用浏览器缓存。此时必须用 MiniCssExtractPlugin.loader 把 CSS 单独抽成文件。
注意它和 style-loader 互斥：不能同时存在；也**不能在 development 模式下使用**，否则报错 Chunk.entryModule is not available。
立即学习“前端免费学习笔记（深入）”；
- 需先
npm install --save-dev mini-css-extract-plugin - 在 Webpack 配置的
plugins中 new 实例，在module.rules中用MiniCssExtractPlugin.loader替换style-loader - 插件默认输出文件名为
[name].css，可通过filename选项控制，例如filename: 'css/[name].[contenthash:8].css' - 若用了
css-loader的importLoaders（比如搭配postcss-loader），顺序要保持一致：[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
postcss-loader 的配置位置和必要性
PostCSS 不是预处理器，而是基于插件的 CSS 工具链。是否需要它，取决于你是否用到了 autoprefixer、postcss-preset-env 或自定义插件。很多人误以为它只是“加兼容性前缀”，其实它还承担着现代 CSS 语法降级（如 nesting、custom-properties）的任务。
它必须放在 css-loader 之后、style-loader 或 MiniCssExtractPlugin.loader 之前，因为 PostCSS 处理的是 CSS 字符串，而非 JS 对象。
-
配置文件应为
postcss.config.js（或.postcssrc），内容至少包含autoprefixer - 若项目用到了 Tailwind，它的
tailwindcss插件也必须在此处声明 -
postcss-loader的sourceMap应与整体 sourcemap 策略一致；开启后会略微拖慢构建速度 - 不要在
css-loader的options里试图塞 PostCSS 配置 —— 它不认这个字段
css-loader 的 modules 配置容易引发命名冲突
启用 CSS Modules 后，类名自动哈希化看似安全，但实际有三个易忽略点：局部作用域不等于完全隔离、全局类仍可穿透、以及动态 class 绑定写法容易出错。
例如 import styles from './Button.css' 后，styles.button 是有效类名，但 className="button" 会失效；更麻烦的是，如果组件里用了 className={isPrimary ? 'button primary' : 'button'}，其中 'button' 是字符串字面量，不会被模块化处理，导致样式丢失。
- 推荐写法：
className={\`${styles.button} \${isPrimary ? styles.primary : ''}\`} - 若需局部+全局混合，可用
:global(.btn-reset)包裹全局类名 -
getLocalIdent可自定义哈希规则，但别盲目缩短（如只留 4 位），哈希碰撞风险会上升 - 注意
node_modules中的 CSS 默认不走 modules，除非显式配置modules: { auto: true }并配好test规则
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
isProduction
? MiniCssExtractPlugin.loader
: 'style-loader',
{
loader: 'css-loader',
options: {
modules: {
auto: (resourcePath) => /src\/components/.test(resourcePath),
localIdentName: '[name]_[local]_[hash:6]',
},
},
},
'postcss-loader',
],
},
],
},
plugins: isProduction
? [new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' })]
: [],
};
CSS 加载流程的复杂点不在 loader 数量，而在它们之间的数据形态流转：从原始字符串 → AST 对象 → JS 模块对象 → DOM 插入 或 文件写入。任一环节的 loader 缺失、顺序错乱、或配置粒度不匹配（比如 modules 开关没对准路径），都会导致样式不生效、类名错乱、甚至构建失败。 
