关键在unplugin-vue-components是否正确识别模板标签并触发样式导入；unplugin-auto-import仅处理JS/TS API自动导入，不涉及CSS。
按需加载第三方组件库的 CSS，关键不在 unplugin-auto-import，而在 unplugin-vue-components 是否正确识别模板标签并触发样式导入；配错 resolver、漏装预处理器、或手动引入全量 CSS，都会让按需失效。
为什么 unplugin-auto-import 不管 CSS 加载
unplugin-auto-import 只处理 JS/TS 层的 API 自动导入（比如 ref、ElMessage），它不解析模板、不读取组件名、也不插入任何 import 'xxx.css' 语句。CSS 按需的触发点完全是另一条链路：由 unplugin-vue-components 在编译时扫描 ElementPlusResolver 映射出对应样式路径，最后注入 import。
- 如果你只配了
AutoImport()里的ElementPlusResolver，但没在Components()里配，CSS 一定不会加载 -
AutoImport({ imports: ['element-plus'] })这行只是让ElMessage等函数自动导入，跟按钮样式毫无关系 - 验证方式：删掉
Components()插件，保留AutoImport()，页面中
怎样让 unplugin-vue-components 正确注入 CSS
核心是三件事：启用插件、配对 resolver、确保路径能被解析。Element Plus 默认走 SCSS 路径（element-plus/theme-chalk/src/components/button.scss），若项目没装 sass，就会静默 fallback 到 CSS，但 fallback 行为不稳定。
- 必须显式在
Components()中传入resolvers: [ElementPlusResolver({ importStyle: 'css' })]，避免依赖未安装的sass -
importStyle: 'css'对应的是element-plus/theme-chalk/button.css，不是index.css；若用'sass'，务必npm install -D sass - 组件名大小写要匹配：支持
- 如果组件内部用了子组件（如
deep: true
为什么异步 import('xxx/style/index') 在 setup 里不生效
Vite（底层 Rollup）会把纯 CSS 的 import() 当作无副作用模块，在 Tree Shaking 阶段直接丢弃——它没导出值，也没被变量引用，静态分析认为“这段代码没用”。所以你看到组件渲染了，但样式空空如也，Network 面板也看不到请求。
- 错误写法：
await import('element-plus/es/components/button/style/index')→ 被剔除 - 正确做法：交给
unplugin-vue-components在编译期注入（推荐），或改用vite-plugin-css-injected-by-js把 CSS 内容转成字符串 + 动态注入 - 手写 fetch +
document.createElement('style')也可行，但得自己管理重复注入和卸载清理，适合极轻量场景 - 千万别在
<script setup></script>里用@import引 CSS：原生 CSS 的@import不认识node_modules路径，会 404
怎么确认 CSS 真按需了，而不是“看起来有”
开发时样式显示 ≠ 按需成功。全量 CSS（比如你在 main.ts 里写了 import 'element-plus/dist/index.css'）也会让一切看起来正常，但它已经覆盖了整个按需流程。
- 运行
npm run build后，打开dist/assets/，搜索el-button.*.css、el-input.*.css—— 有独立文件才说明分离成功 - 浏览器 Network 面板筛选
css，刷新页面，确认只加载了当前页用到的几个组件样式，而不是一个巨大的chunk-vendors.*.css - 删掉所有手动
import 'element-plus/...'，包括main.ts、App.vue、甚至某个自定义 hook 里藏的引入，否则按需逻辑会被绕过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
