CSS 进入 main.css 是因为未被异步模块独占引用，或被同步入口（如 main.ts）直接引入，导致打包器将其归入主 chunk；需检查引用链、禁用默认样式导入、确保按需配置生效。
因为 CSS 没和组件的 JS 模块绑定在同一个异步 chunk 里，构建工具无法识别“这个样式只属于那个组件”——它就默认塞进主包了。
为什么 import './button.css' 还是进了 main.css？
Webpack/Vite 看到 import './button.css'，但没看到它被哪个异步模块独占引用。如果这个 CSS 文件被多个地方（比如 main.ts 和某个懒加载页面）同时 import，或者被一个同步入口直接引入，打包器就会把它归入 main chunk。
- 检查
Network面板：如果main.css里真有 button 相关规则，说明它被同步路径提前拉进来了 - 用
vite build --report或webpack-bundle-analyzer查看button.css的引用链，大概率会发现它来自main.ts或某个全量样式入口 - Vite 默认开启
build.cssCodeSplit = true，但这只对「被异步 JS 模块直接 import 的 CSS」生效；如果 CSS 是通过@import、require()或全局<style></style>引入，它就失效
Element Plus / Ant Design 这类库按需引入后样式仍全量打包
根本原因是：你用了 import { ElButton } from 'element-plus'，但没禁用它的默认样式导入机制，或者忘了配插件自动注入局部样式。
- 确保
unplugin-vue-components启用了dirs扫描 +importStyle: 'less'（或'css'），否则它只导入组件 JS，不触发样式 import - 确认没在
main.ts里写import 'element-plus/dist/index.css'—— 这一行就能让整套样式进 main - 如果用了
vite-plugin-style-import，检查libs配置是否匹配组件名，比如ElButton对应的样式路径是不是theme-chalk/button.css
如何验证 CSS 是否真的按需？
不能只看 import 语句写了没，得看最终产物里它出现在哪个 chunk，以及有没有被其他模块共享引用。
立即学习“前端免费学习笔记（深入）”；
- 打开打包后的
dist/目录，搜索.button-类名，看它只出现在某个page-xxx.[hash].css里，还是也混在main.[hash].css中 - 在组件文件里临时删掉
import './xxx.css'，重新构建，如果对应样式消失了，说明之前确实是它在起作用；如果没消失，说明有别的路径在偷偷引入 - 注意
node_modules里的样式（如normalize.css）常被多个插件重复引入，建议统一收口到main.ts开头，并确保没有其他地方再 import 它
最常被忽略的一点：CSS 的「按需」不是靠 import 写在哪决定的，而是由它所在的 JS 模块是否被标记为异步、是否被唯一引用、以及构建配置是否允许它被单独分块——三者缺一不可。
