element-plus ElMessageBox引入后样式失效

最新推荐文章于 2025-04-22 09:36:13 发布
最新推荐文章于 2025-04-22 09:36:13 发布
阅读量2.3k 收藏 1
点赞数 3
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Cynthia_Yue27/article/details/123572485
版权
博客讲述了在使用Vite构建项目时遇到的Element Plus样式加载异常问题。作者尝试了自动引入和手动引入`element-plus/theme-chalk/index.css`，但仍然无法解决样式失效的问题。最终，通过卸载并重新安装`element-plus`包成功修复了问题。这提醒开发者在遇到类似问题时，可以考虑清理和重新安装依赖作为排查步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用的引入方式是vite里边配置，自动引入
但部分样式可以显示，消息弹窗ElMessageBox样式失效。
参考网上给出的方案，再引入一遍css

// main.js
import 'element-plus/theme-chalk/index.css'

但仍提示未找到相关文件

删除element-plus包，再次重新安装解决问题

疯糖
关注
element-plus ElMessageBox 实现复制功能，动态点击html元素不生效解决
qq_42859450的博客
11-04 2130
Vue3实现复制功能vue-clipboard3
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 1898
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
Element MessageBox弹框的具体使用
10-15
主要介绍了Element MessageBox弹框的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element plus 按需引入模式 ElMessageBox样式失效解决
qq_43654065的博客
08-15 956
import { ElMessage, ElMessageBox } from "element-plus"; import "element-plus/es/components/message/style/css"; import "element-plus/es/components/message-box/style/css";
vue3 + element-plus中ElMessageBox的使用示例
BillKu的博客
04-22 407
【代码】vue3 + element-plus中ElMessageBox的使用示例。
使用element-plus按需引入后ElMessageBox样式丢失的问题
XUELINGMM的博客
05-18 3894
vue3项目中使用element-plus按需引入遇到ElMessageBox样式丢失。
Element-plus自动导入组件，导致MessageBox组件样式丢失
Gnined的博客
03-13 974
使用Element-plus的MessageBox发现样式不完整，且出现在页面左下角。解决方式：在main.ts入口文件中手动引入MessageBox的样式文件。
Element-plus组件库的MessageBox 消息弹框组件自定义样式的坑(样式名称添加上了，但没有对应样式)
m0_51056513的博客
08-17 1715
只作用在该页面组件内，而MessageBox组件被创建在根页面中，所以在该页面中的样式不起作用。，该样式的.my-confirm-button被添加到了MessageBox组件中，但是。中，注意，只把该css样式代码移动到根页面就可以了，页面起作用了，问题至此解决了！如此便发现了问题，因为我的页面用的是。样式移到App.vue的。
vue地图选点
最新发布
04-28
使用 Element Plus 提供的消息框组件 (`ElMessageBox`) 来显示地图选点界面。可以通过自定义 HTML 和样式调整弹窗效果[^2]。 2. **监听窗口间通信事件** 当用户在地图上点击某个位置时，iframe 内部会发送一条...
新峰商城
m0_70851631的博客
06-06 537
个人新峰项目总结
ElMessageBox样式丢失
u010616779的博客
10-02 501
最后找到问题，删除引用即可，直接使用即可。然后出来是样式丢失了。
element-plus的messageBox样式丢失，main.js重新引入el样式后设置的主题色失效
qq_41421033的博客
05-23 851
main.js重新引入element样式，本人项目使用自动按需引入的方法使用element+ui，并结合使用scss。引入后发现定制的主题色被新引入的样式覆盖了,下面修改了引入的文件, 完美解决。
按需引入element-plus中的message和message-box后，缺少样式
weixin_44854962的博客
10-31 1811
1. 使用elenment-ui中的MessageBox 消息弹框时，确认消息。按需引入后没有样式。3. 引入相应的样式即可。
【已解决】Vue3使用Element-plus按需加载时消息弹框ElMessage没有样式
前端界的小学生
06-22 5231
Element-plus在使用ElMessage消息弹框的时候没有样式，按照官方的按需加载的方式引入的。
ElementPluss使用消息类组件样式缺失的问题（ElLoading、ElMessage、ElNotification、ElMessageBox）
weixin_65039404的博客
02-25 577
原因是我们已经配置了按需自动引入了，所以不需要再手动import，虽然会报错，但资源确实是引入了，这是编译器的问题，编译器看不出来你自动引入了，因为那个插件的引入是隐式的，在编译器看来你从来就没定义过ElNotfication这个东西，所以报错（至于手动引入为啥不带样式文件我不清楚，貌似需要单独引入样式文件）。那么问题就缩小到让编译器忽略这个错误上了，这方式就很多很多了。可以看到我将常用的消息组件的名称都声明了全局变量，让编译器认为此变量在文件中不需要再声明，如此即可让编译器忽略掉此问题。
vite+ts+element-plus按需导入后引用ElMessage组件报错或者样式丢失
qq_39111074的博客
09-15 2985
vite+ts+element-plus按需导入后引用ElMessage组件报错或者样式丢失
自动导入时，Element-plus Message Box组件样式丢失
10-09 655
当使用Element-plus ElMessageBox弹出时，样式丢失。具体表现为弹窗显示在左上角，背景页面均为透明。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值