element-plus: [Bug Report] [Style] [message, badge] auto import message's badge style

Bug Type: Style

Environment

  • Vue Version: 3.2.26
  • Element Plus Version: 1.3.0-beta.1
  • Browser / OS: N/A
  • Build Tool: Vite

Reproduction

Related Component

  • el-message
  • el-badge

Reproduction Link

N/A

Steps to reproduce

const handleClick = async () => {
  ElMessage.success({
    message: 'Hello world',
    grouping: true,
  })
  await nextTick()
  ElMessage.success({
    message: 'Hello world',
    grouping: true,
  })
  await nextTick()
  ElMessage.success({
    message: 'Hello world',
    grouping: true,
  })
}

What is Expected?

style is normal

What is actually happening?

badge style didn’t import.

Additional comments

issue from https://github.com/antfu/unplugin-vue-components/issues/272

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Comments: 16 (1 by maintainers)

Most upvoted comments

单独使用 ElMessage (不使用 grouping ) 时依然不会自动导入样式 (使用 Vite + unplugin-vue-componentsunplugin-auto-import 进行自动导入). 需要手动导入样式 import 'element-plus/es/components/message/style/css' 才能解决. 不知道自动导入的问题应不应该在这里提但是感觉应该是个自动导入 BUG. (暂时没有发现其他组件有这个问题, 还在继续试验中)

你肯定是在vue文件里又import { ElMessageBox, ElMessage } from ‘element-plus’;一定要去掉手动引入,既然自动引入那就全部交给自动引入吧