Vue2.6项目引入vue-sweetalert2后样式未生效问题咨询

问题解决方案 #

• 优先排查是否遗漏引入sweetalert2样式文件
  90%以上的无样式问题都是因为只引入了插件逻辑，没有导入配套的样式，修改main.js的引入代码即可：

  import VueSweetalert2 from 'vue-sweetalert2';
  // 新增样式引入代码
  import 'sweetalert2/dist/sweetalert2.min.css';
  
  Vue.use(VueSweetalert2);
  

  重新编译项目后即可正常加载弹窗样式。
• 排查全局样式冲突
  如果引入样式后仍有异常，打开浏览器开发者工具审查弹窗元素，检查.swal2-container、.swal2-popup等核心类的样式是否被项目内的全局重置样式覆盖，常见冲突包括全局修改了div的position属性、z-index属性、box-sizing属性，针对冲突的规则添加样式优先级修正即可。
• 排查版本兼容性问题
  如果上述操作都无效，大概率是安装的vue-sweetalert2版本和Vue2.6不兼容，最新版vue-sweetalert2仅适配Vue3，需要卸载当前版本后安装适配Vue2的历史版本：

  npm uninstall vue-sweetalert2
  npm install vue-sweetalert2@4
  

  重新安装后再引入样式和插件即可正常使用。

内容的提问来源于stack exchange，提问作者mikeym