ElementPlusResolver 的 importStyle 配置必须显式启用，否则 unplugin-vue-components 仅导入组件 JS/TS 逻辑而不注入任何 CSS；需在 Components({ resolvers: [ElementPlusResolver({ importStyle: 'css' })] }) 中明确设置，值可选 'css' 或 'scss'，且不与 vite-plugin-style-import 共存。
ElementPlusResolver 的 importStyle 配置必须显式启用
默认情况下，unplugin-vue-components 只导入组件的 JS/TS 逻辑，完全不处理样式。即使 ElButton 能渲染出来，el-button 类名也压根没被注入 CSS 规则——浏览器里查 computed styles 就会发现空空如也。
关键动作是在 ElementPlusResolver 初始化时传入 importStyle: 'css'：
Components({
resolvers: [
ElementPlusResolver({
importStyle: 'css' // ← 必须写这行
})
]
})
- 值可选
'css'（对应element-plus/dist/theme-chalk/xxx.css）或'scss'（需额外配 Sass 加载器） - 若项目用了
vite-plugin-style-import，它和这个配置互斥，别同时开 - 确认
unplugin-vue-components版本 ≥ 0.25.0，老版本不支持该参数
为什么 importStyle: 'css' 有时仍不生效
常见原因是构建工具没把生成的 CSS 文件真正打进产物。开发时热更新可能掩盖问题，但打包后 dist/ 里搜不到 el-button 相关 CSS 就说明失败了。
- 检查
vite.config.ts是否漏了vue()插件——没有它，CSS 模块无法被识别 - 运行
vite build --debug，看控制台是否输出类似✓ [unplugin-vue-components] importing el-button style - 确保没在其他地方手动
import 'element-plus/dist/index.css'，全局引入和按需样式会冲突 - 如果用的是
element-plus@2.4.0+，注意其dist/theme-chalk下的 CSS 是 ESM 格式，Vite 默认支持，Webpack 则需resolve.alias补丁
ElMessage、ElNotification 这类函数式组件要额外处理
ElMessage 不在模板里出现，unplugin-vue-components 扫描不到，所以即使开了 importStyle 也白搭——它根本不会触发样式导入。
立即学习“前端免费学习笔记（深入）”；
- 必须手动加一行：
import 'element-plus/theme-chalk/src/message.scss'（SCSS）或import 'element-plus/dist/theme-chalk/message.css'（CSS） - 推荐统一放在
src/plugins/element-plus.ts里集中管理，避免散落在各个业务文件 - 如果用
unplugin-auto-import自动导入ElMessage，记得在AutoImport的resolvers里也传importStyle: 'css'，否则只导函数不导样式
调试时最该盯住的三个地方
样式不显示不是玄学，90% 的问题能通过这三个点快速定位：
- 打开浏览器开发者工具，在
Network标签页过滤.css，确认有类似el-button-xxx.css的请求且状态是 200 - 在
Elements面板里右键组件 →Inspect，看元素上有没有el-button类名；有但没样式？说明 CSS 加载了但规则被覆盖或优先级低 - 检查
node_modules/element-plus/dist/theme-chalk/目录是否存在对应组件的 CSS 文件，比如button.css、message.css—— 如果目录结构都不对，大概率是element-plus版本太旧或安装损坏
样式链一旦断在自动导入环节，后续所有视觉表现都会不可控。别依赖“看起来差不多”，每个组件的 class 名、变量、伪元素都得实打实加载到位才算完。
