unplugin-auto-import 不负责加载 css，仅处理 js/ts api 自动导入；真正按需加载 css 的是 unplugin-vue-components，它在模板中识别组件标签后，依据 elementplusresolver 映射规则自动导入对应样式文件（如 button/style/css.js），前提是已安装 sass 且组件名大小写匹配。
不能靠 unplugin-auto-import 加载 CSS，它只管 JS/TS API；真正触发按需 CSS 加载的是 unplugin-vue-components 在模板中识别组件标签后自动导入对应样式文件。
为什么 import 'element-plus/dist/index.css' 会让 CSS 全量打包
这个路径指向的是构建好的全量样式文件，Vite 或 Webpack 都无法对其中的类名做 tree-shaking —— CSS 没有导出语义，工具只能原样打包整个文件。哪怕你只用了 ElButton，.el-dialog__header、.el-table__cell 这些未用规则也全进包里。
常见现象：npm run build 后 dist/assets 下只有一个巨大的 style.xxx.css，体积远超预期。
- 检查是否在
main.ts或某个全局入口里误写了import 'element-plus/dist/index.css' - 搜索项目里所有
import语句，确认没有类似ant-design-vue/dist/antd.css的全量引入 - 如果用了主题定制（如 SCSS 变量），全量引入还会覆盖你自定义的变量值
unplugin-vue-components 是按需加载 CSS 的实际执行者
它在编译期扫描 <elbutton></elbutton> 或 <el-button></el-button> 这类标签，匹配 ElementPlusResolver 内置的路径映射规则，然后自动插入对应组件的样式模块，比如：
import 'element-plus/lib/components/button/style/css.js'
这个过程依赖两个前提：
-
vite-plugin-sass（或sass）已安装，否则插件默认尝试加载.scss路径会失败并静默跳过 - 组件名大小写必须匹配 resolver 规则：支持
ElButton和el-button，但不支持ELBUTTON或elbutton - resolver 必须显式注册，仅配
unplugin-auto-import不起作用
vite-plugin-style-import 的配置陷阱
它适合想“写一句 import { ElButton } from 'element-plus' 就自动带样式”的场景，但默认配置几乎必翻车：
-
libraryName必须设为'element-plus'，且esModule: true得开启 -
resolveStyle要严格匹配路径：例如(name) => `element-plus/lib/components/${name.toLowerCase()}/style/css.js` - 若项目用的是
theme-chalk的 SCSS 版本，得把css.js换成index.scss，并确保sass已安装 - 它对非 ESM 格式的组件库（如某些旧版 Ant Design Vue）可能失效
验证 CSS 是否真按需加载
别只看开发时效果，最终产物才作数：
- 运行
npm run build，打开dist/assets/目录，找有没有el-button.xxx.css、el-input.xxx.css这类独立小文件 - 浏览器 DevTools → Network → Filter
css，刷新页面，确认只请求了当前路由用到的组件样式 - 如果看到
chunk-vendors.xxxx.css体积异常大，大概率是某处漏掉了全量引入，或unplugin-vue-components没生效
最容易被忽略的是：SCSS 编译支持缺失导致样式路径 fallback 失败，以及 resolver 对组件名大小写的敏感性 —— 这两者会让 CSS 看似配置成功，实则完全没加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
