unplugin-vue-components 不自动引入 CSS，仅负责组件注册和类型声明；样式是否加载取决于 resolver 是否正确返回 sideEffects 或配置 importStyle 且路径匹配组件库实际结构。
unplugin-vue-components 本身不自动引入 CSS，它只负责组件注册和类型声明
很多人误以为装了 unplugin-vue-components 就能“自动加载样式”，结果运行时报 Cannot find module 'xxx/style/css' 或界面无样式。这是因为该插件的核心职责是解析模板中用到的组件名、生成 import 语句并注册为全局可用组件，**它不处理样式文件的加载逻辑**——样式是否引入、怎么引入，完全取决于你配的 resolvers 是否返回了正确的 importStyle 路径，以及目标组件库是否真的提供了该路径下的文件。
样式引入失败的三个常见原因和对应解法
以下问题在 Element Plus、Naive UI、Ant Design Vue 等主流库中高频出现：
- 组件库已移除
style/css目录（如新版 Naive UI 不再导出naive-ui/lib/button/style/css），但 resolver 仍硬设importStyle: 'css'→ 进node_modules/naive-ui/lib/button/看有没有style子目录；没有就删掉importStyle配置，改用全局样式import 'naive-ui/lib/index.css' - 用了
ElementPlusResolver({ importStyle: 'sass' })，但项目没装sass和sass-loader→ Vite 默认不编译.scss，必须npm install -D sass sass-loader - 组件名大小写不匹配：写了
<el-button>，但文件叫ElButton.vue，resolver 按 PascalCase 匹配失败 → 改模板为<ElButton>，或显式配resolvers: [ElementPlusResolver({ extract: true })]启用标签名规范化
vite.config.ts 中 resolver 的 importStyle 参数到底怎么选
importStyle 不是“开关”，而是路径拼接规则。它的值会直接参与构造最终 import 路径，比如：
importButtonfrom'ant-design-vue/es/button/style/css'
所以必须和组件库实际导出结构一致。常见组合：
立即学习“前端免费学习笔记（深入）”；
-
ElementPlusResolver({ importStyle: 'sass' })→ 要求element-plus/es/button/style/sass存在，且项目支持 Sass -
NaiveUIResolver({ importStyle: 'css' })→ 已失效（2026 年起 Naive UI 默认不再提供style/css），应去掉该参数或设为false -
AntDesignVueResolver({ importStyle: 'less' })→ 需额外装less和less-loader，否则构建报错
不确定时，先查 node_modules/<lib>/lib/<component>/ 下有没有 style 目录，再决定是否传 importStyle 及传什么值。
真正“自动引入 CSS”的唯一可靠方式：靠 resolver 返回 sideEffects
插件内部通过 sideEffects 字段触发样式 import。例如一个自定义 resolver 返回：
{ name: 'MyButton', from: 'my-lib', sideEffects: 'my-lib/dist/my-button.css' }
插件就会在生成的 components.d.ts 同级插入一行 import 'my-lib/dist/my-button.css'。这意味着：样式能否自动引入，100% 依赖 resolver 实现是否正确返回 sideEffects。官方 resolver（如 ElementPlusResolver）做了这件事，但很多第三方或私有库 resolver 没做，此时只能手动 import 或退回到全局样式。
最易被忽略的一点：resolver 返回的 sideEffects 路径必须是可被 Vite 正确解析的相对或绝对路径，不能是包内未导出的内部路径（比如 node_modules/xxx/src/xxx.scss），否则构建直接失败。
