答案是build.cssCodeSplit默认true仅控制异步chunk的CSS拆分，主入口CSS默认内联JS；要提取独立CSS需禁用内联（如调大assetsInlineLimit）、配置assetFileNames并确保未覆盖Vite默认资产分发逻辑。
CSS 默认不会单独提取，必须显式关闭内联、启用 CSS 代码分割才能生成独立 .css 文件。
为什么 build.cssCodeSplit 默认为 true 却不生效？
Vite 的 build.cssCodeSplit 控制的是「是否将异步 chunk 中的 CSS 拆出」，而非「是否把所有 CSS 提取成独立文件」。它只对动态导入（import()）产生的异步模块起作用；主入口的 CSS 仍会默认内联到 JS 中（除非你禁用内联）。
- 主入口 CSS（如
main.ts里import './index.css'）→ 默认打包进 JS，不生成单独.css - 异步组件里的 CSS（如
defineAsyncComponent(() => import('./Foo.vue'))）→ 若build.cssCodeSplit: true，其样式可能被拆成单独.css
如何强制主入口 CSS 单独提取？
关键不是开 cssCodeSplit，而是关 build.rollupOptions.output.inlineDynamicImports 并配合 build.rollupOptions.output.manualChunks 或直接用 build.rollupOptions.plugins 插入 postcss + rollup-plugin-css-only —— 但最稳妥的方式是：启用 build.minify: 'esbuild'（或 'terser'）并设置 build.rollupOptions.output.entryFileNames 和 assetFileNames，再显式禁用 CSS 内联：
- 在
vite.config.ts中添加：build: { rollupOptions: { output: { assetFileNames: (chunkInfo) => { if (chunkInfo.name === 'style.css') return 'assets/[name].[hash].css'; if (chunkInfo.type === 'asset' && /\.css$/.test(chunkInfo.name)) return 'assets/[name].[hash].css'; return 'assets/[name].[hash].[ext]'; } } } } - 更重要的是：确保没有配置
build.rollupOptions.output.inlineDynamicImports = true（默认是false，但若手动设为true就会强制内联） - 若使用
@vitejs/plugin-vue，它默认会把 SFC 中的<style></style>提取为独立 CSS，前提是未开启styleInjection等内联选项
常见错误：CSS 被 base64 内联进 JS
这通常是因为资源体积小于 build.assetsInlineLimit（默认 4096 字节），Vite 会自动把小 CSS 当作 asset 内联为 data: URL。即使你写了 import './big.css'，如果文件实际压缩后不足 4KB，仍可能被内联。
立即学习“前端免费学习笔记（深入）”；
- 检查构建产物中 JS 文件是否含
data:text/css;base64,→ 是，则说明被 inline 了 - 解决方法：调大
build.assetsInlineLimit，例如设为0（完全禁用内联）或一个足够大的值（如1000000） - 注意：
assetsInlineLimit对 CSS 文件有效，但对 JS 中import的 CSS 不影响其是否走 CSS 处理管线——它只控制「静态资源是否转 data URL」
生产环境 CSS 提取的实际效果依赖输出配置
真正决定是否生成独立 .css 文件的，是 Rollup 的 output.assetFileNames 模式匹配 + Vite 的 CSS 处理阶段是否被绕过。Vite 在构建时会把所有 CSS 汇总为一个或多个 chunk，然后交由 Rollup 输出；如果你没做任何干预，它通常会生成 style.css（来自 build.rollupOptions.output.entryFileNames 之外的 asset chunk）。
- 最简验证方式：运行
vite build --debug，观察日志中是否有rendered CSS asset行，并检查dist/assets/下是否存在.css文件 - 若始终不出
.css，大概率是build.rollupOptions.output配置覆盖了 Vite 默认的 asset 分发逻辑，尤其是误删了assetFileNames的默认函数 - 不要依赖插件模拟提取（如旧版
vite-plugin-css-injected-by-js），它会让 CSS 丧失媒体查询分离、@import去重等原生能力
