MiniCssExtractPlugin 是 Webpack 合并 CSS 的实际入口，但需禁用 style-loader、正确配置 loader 顺序（MiniCssExtractPlugin.loader 在 css-loader 前、postcss-loader 居中）、严格按 JS import 顺序组织样式引入，并配合 css-minimizer-webpack-plugin 压缩，才能实现可控的层叠顺序。
MiniCssExtractPlugin 是 Webpack 中合并 CSS 的实际入口，但光配它不等于真合并——很多项目构建完仍输出多个 CSS 文件，或顺序错乱导致样式覆盖，根源在于 loader 顺序、 import 方式和压缩插件协同失效。
Webpack 必须关掉 style-loader 才能合并
只要 style-loader 还在 rules 里，CSS 就会以 insertRule 形式塞进 JS，根本不会生成独立 CSS 文件，更谈不上“合并”。MiniCssExtractPlugin.loader 必须完全替代它：
- 开发时用
style-loader（热更新快），生产环境才换MiniCssExtractPlugin.loader -
MiniCssExtractPlugin.loader一定要放在css-loader前面，否则提取失败 - 如果用了
postcss-loader，它得夹在css-loader和MiniCssExtractPlugin.loader之间，不然嵌套语法、@layer等会被跳过
import 顺序 = 最终 CSS 规则顺序
Webpack 不按文件路径或依赖深度排序，只认 JS 入口里 import 的书写次序。比如：
import './reset.css'; import './base.css'; import './components/button.css';
最终生成的 styles.[hash].css 里，reset.css 内容一定在最前面。这个顺序一旦写反，!important 都救不回来。
- 别在多个 JS 文件里零散
import样式，否则每个 chunk 都可能带一份 CSS - 想全局统一？建一个
shared-styles.ts，把所有import收口到这里，再让其他入口只import它 -
@import写在 CSS 文件内部是危险的——Webpack 会把它当异步模块抽走，造成 FOUC 或闪屏
css-minimizer-webpack-plugin 不启用就等于没压缩
Webpack 5+ 默认不压缩 CSS，哪怕你用了 MiniCssExtractPlugin，输出仍是明文。必须显式加 css-minimizer-webpack-plugin，且注意配置陷阱：
立即学习“前端免费学习笔记（深入）”；
- 别设
optimization.minimize: false，这会直接禁用所有 minimizer，包括它 - 大量 SCSS 文件时，务必加
parallel: true，否则构建卡死 - 压缩后体积没变小？检查是否漏了
level: { 1: { specialComments: 0 } }，否则 license 注释全保留 - 若需兼容 IE8，
cssnano底层要传compatibility: 'ie8'，否则*zoom: 1类 hack 全被删光
Vite 和 PostCSS 的合并逻辑完全不同
Vite 默认合并静态 import 的 CSS，但只限「同一入口构建图谱内」。你在 main.ts 和 admin.ts 里都 import 了同样的两个 CSS，Vite 会生成两份合并结果，不会跨入口复用。
- PostCSS 的
postcss-import插件会在编译期同步展开@import，顺序由源文件里的@import语句决定，不是最终打包顺序 - 如果 A.css
@importB.css，B.css 又@importC.css，产出顺序是 C→B→A，和你 JS 里import次序无关 - 避免嵌套
@import；推荐用 Webpack/Vite 原生import控制依赖图，PostCSS 只做 autoprefixer、nesting 这类转换
import 散落在十几个组件里，再好的插件也救不了权重冲突。 
