甜蜜的警报 CSS 样式未在 Vue 应用程序中应用答案

【问题标题】：sweet alert CSS styles not being applied in Vue app甜蜜的警报 CSS 样式未在 Vue 应用程序中应用
【发布时间】：2021-11-21 22:45:41
【问题描述】：

我已经在我的 Vue 应用程序（2.6 版）中安装了 vue-sweetalert2。我在main.js 中包含以下内容：

import VueSweetalert2 from 'vue-sweetalert2';

Vue.use(VueSweetalert2);

我有一个带有点击处理程序的简单按钮：

 <button v-on:click="alertDisplay">Click me</button>

     alertDisplay() {
      this.$swal('Heading', 'this is a Heading', 'OK');
     },

这按预期工作。单击按钮时，sweetAlert 模式显示，但它出现在页面的最左下角，没有任何样式。我环顾四周，但在 Vue 应用程序的上下文中找不到此问题的明确原因或解决方案。

非常感谢任何想法！

【问题讨论】：

【解决方案1】：

当你使用vue-sweetalert2时，你必须导入css文件才能得到你想要的结果。

在您的 main.js 文件中使用以下代码行：

import 'sweetalert2/dist/sweetalert2.min.css';

另外，如果您想更改字体系列，请使用以下 css 代码：

.swal2-title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

希望对你有帮助；）

【讨论】：