Webpack用MiniCssExtractPlugin可将多个CSS合并为main.css，但开发环境需回退style-loader以支持HMR；Vite默认合并import进来的CSS，禁用HTML中link硬引入；所有样式必须通过JS import纳入模块图才能被合并。
Webpack 里怎么把多个 .css 文件打包成一个 main.css
用 MiniCssExtractPlugin 替代旧版的 style-loader，它能把所有 import './a.css' 和 import './b.css' 的内容抽出来，合并进一个输出文件。
常见错误是开发环境也配了这个插件，结果热更新失效——它不支持 HMR，得在 mode: 'development' 时换回 style-loader。
- 安装：
npm install --save-dev mini-css-extract-plugin css-loader - 配置中区分环境：
rules里对.css的use数组，开发用['style-loader', 'css-loader']，生产用[MiniCssExtractPlugin.loader, 'css-loader'] - 插件部分加一行：
new MiniCssExtractPlugin({ filename: 'main.css' })
Vite 怎么默认就只输出一个 style.css
Vite 在生产构建时自动做 CSS 合并，不需要额外插件。但前提是别手动写 <link rel="stylesheet"> 引入多个文件——所有样式必须通过 JS import 进来，比如 import './base.css'; import './theme.css';。
容易踩的坑：用了 @import 但路径写错，或者 @import 写在 :root 后面导致被忽略；Vite 不会警告，只是不合并那部分。
立即学习“前端免费学习笔记（深入）”；
- 确保所有 CSS 都走
import，而不是 HTML 中硬编码<link> -
@import必须写在文件最前面，不能有空行或注释挡在前面 - 如果用了
css.preprocessorOptions（如scss），@import路径要相对于项目根目录，不是相对于当前文件
PostCSS 插件会不会影响 CSS 合并效果
不影响合并行为本身，但会影响最终输出内容是否“可合并”。比如 postcss-import 是预处理阶段展开 @import，它跑在 Webpack/Vite 的 loader 之前，所以合并的是展开后的结果；而 postcss-preset-env 或 autoprefixer 是后处理，作用于已合并的单个 CSS 流。
关键点：如果你依赖 postcss-import 来复用变量或 mixin，又没配好 resolve-url，就可能出现路径解析失败、部分样式丢失——看起来像“没合并”，其实是某几份根本没加载进来。
- 检查控制台有没有
Failed to resolve import类错误 -
postcss-import默认不解析 node_modules 里的路径，要显式加{ path: ['node_modules'] } - 避免在同一个项目里混用
postcss-import和 Webpack 的css-loader的@import处理，会重复展开或冲突
HTML 中 <link rel="stylesheet"> 多次引入，打包工具管不管
完全不管。Webpack、Vite、Rollup 都只处理 JS 模块图里的 import，HTML 里的 <link> 是运行时行为，打包阶段直接无视。
这意味着：你写了 5 个 <link href="xxx.css">，构建产物里照样 5 个请求，压缩和合并都白搭。
- 静态资源必须收口到 JS 入口里
import，哪怕只是import './assets/main.css'; - 如果要用
<link preload>或媒体查询，改用 JS 动态创建<link>，或用html-webpack-plugin的templateParameters注入逻辑 - 服务端渲染场景下，更要注意 SSR 侧是否也把样式收集进同一份
cssText，否则首屏仍会多请求
import 的，再好的打包配置也抓不到。 
