组件库必须提供可被单独import的样式模块路径，如element-plus/lib/components/button/style/css.js，且文件需真实存在并执行import './button.css'，路径命名稳定、导出空对象，SCSS/Less需提供编译后.css或配置对应loader。
业务项目要按需加载组件库的 CSS，关键不是“让组件库导出什么”，而是组件库必须提供可被单独 import 的样式模块路径，并确保这些路径在构建后真实存在、能被业务项目解析到。
组件库必须暴露单组件样式入口文件
打包后的 node_modules/xxx 目录下，每个组件应有对应样式文件，比如：element-plus/lib/components/button/style/css.js 或 ant-design-vue/es/button/style/css.js。这个文件不能是空壳，必须实际执行 import './button.css'（或编译后的等效逻辑）。
- 路径命名要稳定：不能依赖构建时随机 hash，也不能用
index.css这类泛化名 - 必须导出一个空对象或默认 export（如
export default {}），否则 Vite/Webpack 可能报 “no exports” 错误 - 如果组件库用 SCSS/Less，需额外提供已编译的
.css版本，或确保业务项目装了对应 loader
vite-plugin-style-import 的配置要点
插件本身不猜路径，全靠 libs 配置驱动。常见翻车点是 libraryName 写错或 resolveStyle 返回了不存在的路径。
-
libraryName: 'element-plus'必须和package.json名一致，大小写敏感 -
resolveStyle: (name) => `element-plus/lib/components/${name.toLowerCase()}/style/css.js`中的name是你 import 的组件名（如Button），要转小写才能匹配目录 - 务必启用
ensureStyleFile: true，否则插件发现路径不存在就静默跳过，不会报错 - 若组件库样式文件后缀是
.scss，得改写为style/index.scss并确认业务项目支持
业务项目里不能手动 @import 组件样式
在 Vue 单文件组件的 <style scoped></style> 里写 @import '../node_modules/xxx/button.css' 是无效的——Vue 编译器会忽略它；非 scoped 下虽能加载，但注入时机晚于组件挂载，首屏易闪动，且无法参与 Tree Shaking。
- 样式必须通过 JS
import触发，才能被构建工具识别为依赖 - 不要用相对路径模拟，如
import './button.css'，这绕过了别名和 node_modules 解析，Vite 无法定位到真实包路径 - 所有全局样式（reset、iconfont、主题变量）仍需统一在
main.ts导入，它们不走按需逻辑
验证是否真按需的关键信号
别只看代码写了没，要查最终产物。真正生效的按需，会在打包后 CSS 文件里看不到未使用组件的类名（如 .el-dialog__header、.ant-table-cell）。
- 用
rollup-plugin-visualizer查看 CSS 模块体积分布，确认button.css是否独立成 chunk - 检查 devtools 的 Network 面板：点击按钮触发的组件，对应 CSS 是否在首次渲染后才加载（需配合异步组件）
- 修改组件库样式文件内容，重启 vite，观察 HMR 是否生效——如果没反应，说明路径没被正确 resolve
最常被忽略的是：CSS 按需只对「JS 层 import 触发的样式」有效；凡是以 @import url()、内联 <style></style>、或 HTML 中 <link> 加载的样式，都不在构建器的分析范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
