babel-plugin-import 自动引入样式需严格匹配组件库目录结构；style: true 与 style: 'css' 查找路径逻辑不同，v5 中前者报错后者推荐；自研库需用函数动态生成路径；icon 样式需单独处理；全局 css 重复引入会导致样式冲突。
babel-plugin-import 能自动引入组件库的 CSS 样式，但前提是配置匹配组件库的实际目录结构和导出方式；配错 style 参数或路径规则，样式就根本不会被 require 进来。
style: true 和 style: 'css' 的行为差异必须分清
这两个值看似只差一个字符串，实际触发的文件查找逻辑完全不同：
-
style: true会让插件尝试加载antd/lib/button/style/index.js（v4）或antd/es/button/style/index.js（v5 前），但 v5 已移除该入口，直接报错Cannot find module 'antd/es/button/style/index.js' -
style: 'css'则跳过index.js，直奔antd/es/button/style/css.js（v4）或antd/es/button/style/index.css（v5 推荐写法）——前提是该文件真实存在 - 如果组件库用的是
lib/而非es/目录，libraryDirectory: 'lib'必须同步设置，否则路径拼出来就是错的
当默认 style 规则不适用时，用函数动态生成路径
很多自研或小众组件库（比如 v-easyui123）的样式文件并不按 style/index.js 或 style/css.js 组织，而是扁平放在 lib/style/switch.css 这类路径下。这时必须用函数：
style: (name) => `v-easyui123/lib/style/${name.split('/')[2]}.css`
其中 name 是插件解析出的原始导入路径，例如 v-easyui123/lib/switch/index.js，取第三段 switch 拼出真实 CSS 路径。漏掉 split 索引或写错分隔符，返回的路径就 404。
Icon 组件样式丢失是高频盲区
Ant Design、Ant Design Vue 等库的 Icon 不走组件主包的 style 路径，它依赖独立的 @ant-design/icons 包及其 CSS：
- 即使
Button的样式通过style: 'css'正确加载了，Icon依然可能空白 - 必须单独安装
@ant-design/icons并手动引入其 CSS：import '@ant-design/icons/dist/icons.css'（或按需引入 SVG 文件） -
babel-plugin-import对Icon完全无感，它只处理import { X } from 'xxx'中的命名导入，而Icon往往是import { HomeOutlined } from '@ant-design/icons'，不属于目标库的libraryName范围
最常被忽略的其实是样式重复：如果项目已全局引入过 antd/dist/antd.css，再开启 style: 'css' 就会把同一套 CSS 加两次，导致优先级混乱、覆盖失效——这种问题只能靠检查打包产物里的 CSS 内容是否重复出现来定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
