Skip to content

Element Plus 指令/服务样式需手动导入 #271

Description

@yinhx3

问题: unplugin-element-plus(vite 插件)只自动导入 <el-xxx> 组件的样式(如 el-tableel-button),不处理以下两类:

  • 指令v-loadingv-infinite-scroll
  • 服务ElMessageElMessageBoxElNotification

当使用 import { vLoading } from 'element-plus' 时,指令逻辑正常运行(DOM 元素被创建),但 CSS 未加载。v-loading 的遮罩层(.el-loading-mask)没有绝对定位和半透明背景,退化为普通块元素,导致被遮罩的内容被挤到下方而不是被覆盖。

修正: main.ts 中手动导入相关 CSS:

// src/main.ts
import 'element-plus/theme-chalk/el-loading.css'

如果将来其他指令/服务遇到样式缺失,同样在 main.ts 中添加对应 CSS 导入:

  • element-plus/theme-chalk/el-message.css
  • element-plus/theme-chalk/el-message-box.css
  • element-plus/theme-chalk/el-notification.css

不知道这是 bug 还是预期行为,至少要在文档里提一下

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions