element-plus 中 el-message等无法引入样式_elmessage 没有样式-CSDN博客

在基于Element Plus + Vite的项目中遇到el-message样式缺失的问题，尝试引入样式文件未果。最终发现是引入了错误的主题样式，正确引入`element-plus/theme-chalk/index.css`并配置locale后，样式正常显示。此问题解决方案对于遇到类似问题的开发者具有参考价值。

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

事情的起因是这样的：我是在element-plus+vite的官方模板的基础上进行的页面处理，

然后发现我在调用el-message时会出现没有样式的情况：类似于

这样的。。。

本来就是一个确认消息，代码：

ElMessage.success('Hello')

结果没样式，网上查了说是没引入样式，但是像他们一样加了样式之后，还是出现样式不对的情况，这个成功的消息确实显示了，但是只有文字，没有背景，孤零零的挂在上边，完全不是我想要的效果。

然后我就怀疑是样式引入的不对，所以我就把

 <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
 />

index.html中的这个cdn样式引入了，发现就没这个问题了，那情况就很明晰了，就是引入的不对。

结果如下：我是引入的

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

这个文件，网上有说单独引入其他的或者引入scss的，我都没能成功。记录下，下次遇到印象能深一点。

---------------------------------------------------------------------------------------------------------------------------------

补充：

还要在main.ts中添加对elementplus的引用，不然样式还是不生效

import ElementPlus from "element-plus";

import zhCn from "element-plus/es/locale/lang/zh-cn";

app.use(ElementPlus, {

  locale: zhCn,

});