Vite默认合并静态import的CSS，但生成多个CSS文件通常因多入口、动态import、manualChunks配置或插件注入所致；强制单文件需统一样式入口、设单input、禁用分块并注意层叠顺序。
Vite 默认就合并静态 import 的 CSS，但“合并成单文件”不是默认行为，而是受入口结构和构建配置共同影响的结果。 你看到多个 .css 文件输出，通常是因为存在多个入口（如 main.ts 和 admin.ts），或启用了某些分块策略。真要压成一个 CSS 文件，得主动约束依赖图和输出逻辑。
为什么 build 后还是生成了多个 CSS 文件
常见错误现象是：明明只在 main.ts 里 import 了几个 CSS，结果 dist 目录下却出现 style.css、index.css、甚至带 hash 的碎片文件。这通常由以下原因导致：
- 项目有多个入口（
build.rollupOptions.input配置了数组或对象），Vite 会为每个入口生成独立的 CSS chunk - 用了动态
import()加载 CSS（比如路由级样式），这类 CSS 不会被纳入主合并流程 - 启用了
build.rollupOptions.output.manualChunks，且规则匹配到了 CSS 模块（例如按包名拆分时误把node_modules/.vite/...中的样式也拆了） - 某些插件（如
vite-plugin-pwa或自定义 CSS 处理插件）在构建后期又注入了额外样式资源
强制所有 CSS 合并进一个文件的实操方式
核心思路是：让所有样式都属于同一个构建“子图”，且关闭任何可能导致 CSS 分离的配置。最稳妥的做法是集中 import：
- 新建一个
src/shared-styles.ts（或.js），在里面统一import './a.css'; import './b.css'; import 'tailwindcss/base';等所有样式 - 确保整个项目中 **只有这个文件 import CSS**，其他地方（包括
main.ts）不再直接 import 样式文件 - 在
vite.config.ts中显式指定单入口：export default defineConfig({<br> build: {<br> rollupOptions: {<br> input: './src/main.ts', // 不要写成数组<br> output: {<br> manualChunks: undefined // 确保没残留配置<br> }<br> }<br> }<br>}) - 如果用了 Tailwind，确认
tailwind.config.js的content字段已覆盖全部模板路径，避免 purge 误删 —— 否则即使合并了，也可能缺样式
合并后类名冲突或权重异常怎么办
这不是打包工具的问题，而是 CSS 层叠顺序被打破的表现。Vite 合并 CSS 时完全按 import 顺序拼接内容，不重排规则：
立即学习“前端免费学习笔记（深入）”；
- 如果
a.css定义了.btn { color: red; }，b.css又定义了同名.btn { color: blue; }，那最终生效的是后者——前提是b.css在 import 列表中排在a.css后面 - 避免在不同 CSS 文件里写相同选择器；更推荐用 BEM、CSS Modules 或
scope（Vue SFC）隔离作用域 - 慎用
@import（尤其嵌套）：Vite 不处理它，全靠 PostCSS 的postcss-import展开，而该插件展开顺序与源码 import 顺序无关，容易错乱 - 想验证最终 CSS 内容？构建后打开
dist/assets/style.xxxxx.css直接查看，比猜更可靠
真正难的不是“怎么合并”，而是合并之后谁来保证样式不互相覆盖、不因顺序变化突然失效。工程上建议把样式组织权交给模块系统（如 Vue 的 scoped、React 的 CSS-in-JS），而不是靠人工维护 import 顺序。
