因为 CSS 模块是副作用模块，Vite 默认不会在动态 import() 中解析其副作用，该导入会被 Tree Shaking 剔除，导致样式丢失。
为什么 import 'element-plus/es/components/button/style/index' 不能直接用在 setup 里？
因为 CSS 模块是副作用模块，Vite（及底层 Rollup）默认不会在动态 import() 中解析其副作用。如果你写成：
const loadButton = async () => {
const { ElButton } = await import('element-plus/es/components/button')
await import('element-plus/es/components/button/style/index') // ❌ 不生效
return ElButton
}
这行 CSS 导入会被静态分析剔除——它没导出任何值，也没被任何变量引用，Tree Shaking 直接丢掉。
常见错误现象：组件渲染正常，但样式完全丢失，控制台无报错，Network 面板也看不到 CSS 请求。
- 必须显式调用一个有副作用的函数来触发加载（比如插入
<style>标签） - 或改用 Vite 插件接管 CSS 注入逻辑（如
vite-plugin-css-injected-by-js） - 不推荐在
setup中用require或import()加载纯 CSS，Vite 不支持运行时解析 CSS 模块依赖
vite-plugin-css-injected-by-js 怎么配才不漏样式？
这个插件本质是把 CSS 内容转成字符串，再通过 JS 动态创建 <style> 标签注入 DOM。它能解决按需 + 异步 + 样式共存的问题，但配置不当会漏样式或重复注入。
立即学习“前端免费学习笔记（深入）”；
关键点在于路径匹配和注入时机：
- 插件默认只处理
.css、.scss等后缀，而 Element Plus 的样式路径是index.css（ESM 版本里其实是index.js里import './index.css'），所以要确保插件能命中该文件 - 在
vite.config.ts中启用时，include必须覆盖到第三方库的样式路径，例如：include: ['node_modules/element-plus/**/*.{css,scss}'] - 不要同时开启
autoInject和手动import，否则同一份 CSS 可能被注入两次 - 如果组件卸载后样式未清除，需要配合
unplugin-auto-import或手动在onBeforeUnmount中移除对应<style data-vite-css-injected="xxx">标签
不用插件，纯手写异步 CSS 加载怎么写？
适用于轻量场景或想完全掌控流程。核心是绕过模块系统，用原生 fetch + document.createElement('style')。
示例（封装为可复用函数）：
async function loadCss(url: string): Promise<void> {
if (document.querySelector(`link[href="${url}"], style[data-css-url="${url}"]`)) return
const css = await fetch(url).then(r => r.text())
const style = Object.assign(document.createElement('style'), {
textContent: css,
'data-css-url': url
})
document.head.appendChild(style)
}
// 使用时（注意路径必须是构建后的真实 URL）
loadCss('/node_modules/element-plus/es/components/button/style/css.css')
⚠️ 注意事项：
- Element Plus 的 ESM 样式入口不是标准 CSS 文件，而是
index.js，里面再import './index.css'—— 所以你要找的是最终产出的css.css路径，不是源码路径 - Vite 开发模式下，
/node_modules/...路径不可直接访问，得先用import.meta.globEager或构建时 copy 到public - 生产环境需确认 CDN 或静态资源服务是否允许跨域读取 CSS
按需引入时，CSS 和 JS 的加载顺序为什么容易错乱？
JS 组件代码和对应 CSS 并非原子操作。即使你写了：
const { ElButton } = await import('element-plus/es/components/button')
await import('element-plus/es/components/button/style/css')
实际执行中，JS 模块可能已解析完毕并尝试渲染，但 CSS 还在 fetch 阶段，导致 FOUC（Flash of Unstyled Content）。
根本原因是：Vite 的 import() 对 CSS 模块返回的是一个空对象（{}），无法用 await 确保样式就绪。
- 解决方案一：用
Promise.all包裹 JS + CSS 的import()，但仅限两者都是 ESM 模块且 CSS 模块被插件正确处理 - 解决方案二：在组件
mounted钩子中检查getComputedStyle(el).display是否符合预期，否则延迟渲染 - 最稳做法：把样式打包进 JS bundle（即让插件把 CSS 字符串内联进 JS），避免网络竞态
真正难的不是“怎么加”，而是“怎么确保它一定在组件挂载前就位”。这点在 SSR 或微前端场景下更敏感，容易被忽略。
