因为css库默认导出完整样式文件，import ‘xxx/dist/index.css’ 会打包所有组件样式；即使只用button，datepicker和table样式仍被加载，这是库为开箱即用而设计，并非代码错误。
为什么 import 一个 Button 却打包了整套 CSS 库
因为多数 CSS 库（如 element-plus、ant-design-vue、naive-ui）默认导出的是完整样式文件，import 'xxx/dist/index.css' 会把所有组件的 CSS 全塞进 bundle。哪怕你只用了 Button，DatePicker 和 Table 的样式也照常加载。
这不是你代码写错了，是库的设计使然 —— 它们优先保障开箱即用，不是按需优化。
- 检查你的
vite.config.ts或webpack.config.js是否启用了样式提取插件（如unocss、postcss-import），但没配按需解析逻辑 - 确认你引入组件时是否用了“运行时按需”方式（比如
defineComponent+app.use(Button)），但样式仍走全局 import - 注意：某些库（如
ant-design-vue）的babel-plugin-import只处理 JS 导入，不触碰 CSS —— 你得手动配样式路径
babel-plugin-import 能不能自动引对应 CSS 文件
能，但有严格前提：库必须提供与组件名一一对应的独立 CSS 文件，且命名规范（如 lib/button/style/css.js），否则插件找不到目标。
以 ant-design-vue@4.x 为例，它已移除单组件 CSS 文件，babel-plugin-import 配置 style: 'css' 会失败；而 ant-design-vue@3.x 支持，但需额外指定 libraryDirectory: 'es' 才能定位到 es/button/style/css.js。
立即学习“前端免费学习笔记（深入）”；
- 常见失效场景：
style: true启用 less 编译，但项目没装less和less-loader，构建直接报错Cannot find module 'less' - Vue 3 + Vite 用户慎用该插件 —— 它基于 Babel，而 Vite 默认不用 Babel 处理
.vue文件，JSX 组件才生效 - 替代方案更稳：用
unocss或windi-css替代传统 UI 库样式，或改用naive-ui的useDialog等函数式调用（样式可单独import 'naive-ui/lib/dialog/styles/index.css'）
Vite 下用 unocss 替代整包 CSS 引入的实际步骤
unocss 不是“引入某个组件的 CSS”，而是“只生成你代码里真正用到的原子类”，彻底绕过库自带样式文件。适合 Tailwind 风格开发，也兼容部分 UI 库的 class 命名。
关键不是装插件，而是关掉原有 CSS import 并重写使用方式：
- 删掉所有类似
import 'element-plus/theme-chalk/index.css'的全局样式引入 - 在
uno.config.ts中启用@unocss/preset-uno和@unocss/preset-attributify，再加presets: [presetUno(), presetAttributify()] - 组件上改用原子类：
<button class="bg-blue-500 text-white px-4 py-2 rounded"></button>，而不是依赖el-button的内置样式 - 若仍需部分 UI 库功能（如弹窗逻辑），只 import 对应 JS：
import { ElMessage } from 'element-plus'，不 import 样式 —— 由unocss按需生成视觉表现
自己拆解 CSS 文件时最容易漏掉的三类规则
手动提取 node_modules/xxx/dist/xxx.css 中某组件相关样式，看似简单，实则极易出错。最常被忽略的是：
- 伪类和伪元素：比如
.el-button:hover、.el-input__inner:focus，复制主选择器时往往漏掉这些交互态 - 属性选择器和状态类：如
[disabled]、.is-disabled、.is-loading，它们不和组件名同级出现，容易被正则过滤掉 - 层级嵌套与 BEM 修饰符：例如
.el-table .el-table__row.hover-row是两层结构，单独抽.el-table__row会导致悬停失效；.el-checkbox.is-checked .el-checkbox__inner::after这种跨多层的更难定位
真要手拆，建议用 chrome 开发者工具的 “Coverage” 面板跑一遍页面交互，看哪些 CSS 规则实际未执行，再反向筛选 —— 直接 grep 文件名基本不准。