直接设 csscodesplit: false 即可，所有 css 合并进单个 style.css，避免重复引入、加载顺序失控、ssr 漏样式及缓存效率低等问题。
直接设 cssCodeSplit: false 即可，所有 CSS 会合并进一个 style.css（或你自定义的文件名），无需额外插件或 hack。
为什么默认开启的 cssCodeSplit 反而容易出问题
它不是“优化”，而是 Rollup 对 CSS 模块引用的默认切分行为：每个 import './xxx.css' 都可能生成独立 chunk。这导致：
- 多个路由组件重复引入同一套 reset 或变量，CSS 体积不减反增
- @import 或
@layer的加载顺序失控，样式覆盖失效 - SSR 场景下服务端无法准确收集全部用到的 CSS，出现 FOUC 或漏样式
- 浏览器对零散
.css文件缓存复用率低，vendor 和业务样式更新耦合被破坏
如何正确配置 cssCodeSplit: false
只需在 vite.config.ts 中写一行：
export default defineConfig({
build: {
cssCodeSplit: false
}
})
注意以下几点：
- 它只影响 CSS 输出粒度，
import()动态导入 JS 依然正常工作 - CSS 仍会走 PostCSS、压缩、提取流程，只是最终只输出一个文件
- 文件名由
build.rollupOptions.output.assetFileNames控制，例如设为[name].[hash].css可保长期缓存 - 若你用了
vite-plugin-singlefile，该插件会自动帮你关掉cssCodeSplit，无需手动配
什么时候真要开 cssCodeSplit: true
除非你同时满足这四条：
- 主题切换由 JS 显式控制（如
document.head.appendChild(link)），且theme-dark.css和theme-light.css完全互斥 - 第三方 UI 库（如 Ant Design）的 CSS 是懒加载的，例如
import('antd/dist/reset.css')，而非静态import - 微前端基座强制要求子应用 CSS 按路由隔离（常见于老旧基座）
- 你已用
build.rollupOptions.output.manualChunks函数精确声明了哪些模块归入哪个 CSS chunk，并验证过加载顺序
绝大多数中后台项目、SSR 应用、或用了 @import/@layer 的样式体系，都不该开。
真正容易被忽略的是：关闭 cssCodeSplit 后，CSS 不是“内联到 JS”，而是统一提取为单个外部文件并注入 —— 这才是可控、可缓存、防 FOUC 的正解。别被“内联 JS”这类错误描述带偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
