Webpack中需用mini-css-extract-plugin替代style-loader来合并CSS，关闭style-loader、统一filename配置、生产环境启用；Vite默认合并静态import的CSS，但按入口分块；PostCSS的postcss-import会影响顺序；合并后类名冲突属CSS层叠问题，需关注import顺序与作用域。
Webpack里怎么把多个CSS文件打包成一个
直接用 style-loader + css-loader 默认不会合并，它只是把每个CSS模块转成JS里的insertRule调用，请求还是一个个发。真要合并，得靠 mini-css-extract-plugin —— 它把CSS抽成独立文件，再由Webpack自动去重、压缩、拼接。
- 必须关掉
style-loader，否则CSS还在JS里，没法合并成单文件 -
mini-css-extract-plugin的filename配置要统一，比如"styles.[contenthash].css"，不然可能生成多个输出 - 如果用了
@import或url()引用其他CSS/字体/图片，确保css-loader的url选项没关掉，否则路径会错位或404 - 开发时别开这个插件（用
style-loader更快），只在mode: "production"下启用，否则热更新失效
Vite项目中CSS自动合并的开关在哪
Vite默认就合并——只要不是动态 import() 加载的CSS，所有静态 import './a.css' 和 import './b.css' 都会被塞进同一个 style.css（或按入口分块）。但有个关键点：它只合并「同一构建图谱内」的CSS。
- 如果你在
main.ts里 import 两个CSS，在admin.ts里又 import 同样的两个，Vite会为main和admin各生成一份合并后的CSS，不会跨入口复用 - 想强制全局合并？得手动把所有样式 import 到一个入口文件里，比如新建
shared-styles.ts，然后只在那里 import 所有CSS - 注意
build.rollupOptions.output.manualChunks配置会影响CSS分包逻辑，改了它可能让本该合并的CSS被拆开
PostCSS插件会不会破坏CSS合并顺序
会。PostCSS本身不关心文件合并，它只处理单个CSS内容流。但如果你在 postcss.config.js 里用了 postcss-import，它会在编译期把 @import 内联进来——这时候顺序就取决于你 import 的先后，而不是最终打包后的文件顺序。
-
postcss-import是同步展开的，如果A.css @import B.css，B.css又 @import C.css，那最终产出就是 C→B→A 的顺序，和你代码里写的 import 次序无关 - 避免嵌套 import；推荐用 Webpack/Vite 原生 import，让打包器控制依赖图，PostCSS只做 autoprefixer、nesting 这类转换
- 如果用了
tailwindcss/nesting这类语法糖插件，确保它放在postcss-import之后，否则嵌套规则可能被 import 拆散
合并后CSS里出现重复类名或权重冲突怎么办
合并本身不产生冲突，但会让原本隔离的样式“见面”——比如两个组件库都定义了 .btn，以前各加载各的CSS，现在挤在一个文件里，后写的会覆盖先写的。这不是打包工具的问题，是CSS层叠规则生效了。
立即学习“前端免费学习笔记（深入）”；
- 检查构建产物里的CSS顺序：Webpack里按
import语句顺序决定，Vite里按依赖图拓扑排序，可通过build.rollupOptions.output.entryFileNames配合manualChunks调整 - 用 CSS Scope（如 Vue SFC 的
scoped、React 的 CSS Modules）能规避，但会失去全局样式复用能力 - 真正难搞的是第三方UI库自带的重置样式（比如 Ant Design 的
reset.css），它通常被最早 import，结果把你自己写的body { margin: 0 }给干掉了——这种得手动挪位置或加!important（不推荐）
最常被忽略的一点：CSS合并后，source map 里的原始行号映射可能错乱，尤其用了 postcss-import 或 @layer。调试时看到的“第123行”未必对应你写的那个文件，得打开浏览器开发者工具的 “Enable client-side sourcemaps” 并确认 CSS 文件是否带 sourceMappingURL 注释。
