CSS无法按需打包是因为Tree Shaking只作用于JS模块依赖，对纯CSS无效；需通过JS层触发样式导入（如单独引入button.css）并配合vite-plugin-style-import等插件在编译时动态注入对应样式。
为什么 import 一个按钮却打包了整套 CSS？
因为大多数组件库的默认导出是「全量样式入口」，比如 element-plus 的 dist/index.css 或 ant-design/dist/antd.css。Webpack/Vite 不会解析 CSS 文件里的选择器依赖，Tree Shaking 对纯 CSS 完全无效——它只作用于 ES 模块的 import/export 关系。
怎样让 CSS 真正按需？关键在「JS 层触发 + 构建时剥离」
必须把样式加载和组件使用耦合起来，让构建工具能识别「某组件被引用 → 对应样式应保留」。否则 CSS 就是死代码，删不掉。
- 用组件库提供的「样式单独导入」方式，例如
ElementPlus推荐的import 'element-plus/theme-chalk/button.css' - 配合插件做自动转换：Vite 用
vite-plugin-style-import，Webpack 用unplugin-vue-components+unplugin-import（启用esbuild或rollup解析） - 确保组件是按需引入的（
defineComponent或app.component注册前就 import），否则样式插件无法匹配到调用链
postcss-import 和 unplugin-vue-components 到底谁负责剔除？
postcss-import 只做 CSS 文件合并，不参与 Tree Shaking；真正起作用的是 unplugin-vue-components 这类插件——它在编译阶段扫描 template 和 setup() 中的组件名，动态注入对应的 JS + CSS import 语句，再交由打包器判断哪些 import 实际被用到。
- 如果用了
components: true自动注册但没配dirs或deep，插件可能漏识别子组件，导致样式不加载 - Vite 3+ 默认开启
treeShaking: true，但若 CSS 是通过require()或内联<style>引入，仍会被保留 - 注意
less/sass变量文件（如variables.less）常被全量 import，它们不会被 shake，得手动拆分或用additionalData注入
为什么开了按需还是打包了 200KB CSS？
常见真凶不是组件样式，而是重置样式（normalize.css）、全局动画、字体图标或暗黑模式切换逻辑——这些往往写在入口 CSS 里，且没有对应 JS 绑定，构建器根本不知道该不该删。
立即学习“前端免费学习笔记（深入）”；
- 检查打包产物中是否含
@import url(".../iconfont.css")这类外部资源，它们绕过所有插件控制 - 禁用组件库的图标字体（改用 SVG 单独引入），避免整套字体文件被打包
- 用
rollup-plugin-visualizer或source-map-explorer定位实际体积来源，别只盯着组件名猜
@import 嵌套、或直接写在 HTML 里的样式，都不在 Tree Shaking 的视野里。 
