vite默认只提取显式import的css文件，若样式写在块或@import中且未被import语句引用，则不会独立提取；需用import './xxx.css'显式引入并保持csscodesplit: true。
为什么 build 后 dist/assets/ 下只有一份 CSS 或压根没有？
不是 Vite “忘了提取”，而是它默认只对直接 import 的 CSS 文件做提取，且受 build.cssCodeSplit 控制。如果项目里所有样式都写在 main.ts 或 App.vue 的 <style></style> 块里，或者通过 @import 写在另一个 CSS 文件中但没被显式 import，Vite 就不会把它识别为“可提取的独立入口”。结果就是：样式全打进 JS 里（cssCodeSplit: false），或只提取了某一个主文件（cssCodeSplit: true 但其余样式未触发）。
如何让多个 CSS 文件各自提取成独立 asset？
关键不是“开启提取”，而是“让每个 CSS 成为 rollup 可见的 chunk 入口”。Vite 默认不扫描 @import 链或 <style scoped></style> 内部路径，只认 import './foo.css' 这种显式语句。
- 把不同模块的样式拆成独立 CSS 文件，例如
src/components/Button/Button.css、src/layouts/DefaultLayout.css - 在对应组件或逻辑中显式 import：
import './Button.css'（注意：不是@import，也不是仅靠<style></style>块） - 确保
vite.config.ts中未禁用 CSS 分割：build: { cssCodeSplit: true }（Vite 4.0+ 默认为true，但若手动设为false就会全内联） - 避免在懒加载组件内部用
require('./xxx.css')——Vite 不支持require，且动态导入路径无法被静态分析
为什么路由懒加载后 CSS 没分包？
因为懒加载写法本身不影响 CSS 提取逻辑，真正影响的是“该组件是否 import 了 CSS”。如果你的 import('@/views/Login.vue') 里只写了 <style scoped></style>，而没额外 import './Login.css'，那它的样式就只会随 Vue SFC 编译进 JS chunk，不会单独提取。
- Vue SFC 的
<style></style>默认走@vitejs/plugin-vue处理，构建时自动内联或合并，不参与cssCodeSplit控制 - 想强制提取 SFC 样式，得用
<style src="./Login.css"></style>写法，再配合显式 import - 更稳妥的做法：全局样式统一在
main.ts导入；局部强隔离样式（如第三方 UI 组件定制）才用独立 CSS + 显式 import
打包后 CSS 文件体积异常小（比如 127 字节）怎么办？
这基本等于“样式没提取成功”，而是空文件占位。最常见原因是 Tailwind 或其他按需工具没扫到类名，导致输出为空，Vite 仍会生成一个空 CSS 文件。
- 检查
tailwind.config.js中content是否覆盖所有实际写 class 的文件，比如漏了.tsx或public/index.html - 运行
npx tailwindcss -i src/input.css -o dist/test.css -c tailwind.config.js --watch快速验证 content 路径是否生效 - 确认
src/input.css中有完整的三行：@tailwind base;、@tailwind components;、@tailwind utilities; - 不要依赖
import.meta.env或运行时条件控制 CSS import——构建阶段无法解析，会导致整块样式被 tree-shaken
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
