自动导入时，Element-plus Message Box组件样式丢失

问题描述

当使用Element-plus ElMessageBox弹出时，样式丢失。具体表现为弹窗显示在左上角，背景页面均为透明。

解决方案

在main.ts中，引入message-box.scss，具体代码为：

import 'element-plus/theme-chalk/src/message-box.scss'
1

完整代码：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import '@/styles/index.scss'
import 'uno.css'
// 使用 ElementMessage
import 'element-plus/theme-chalk/src/message-box.scss'
import 'element-plus/theme-chalk/src/message.scss'


const app = createApp(App)
app.use(createPinia())
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13

最终效果：

参考：

1. element-plus 的 message box 样式丢失 - 掘金: https://juejin.cn/post/7114295680339804173