SweetAlert2 本身是独立样式、零依赖的弹窗库，无需集成 Bootstrap；强行套用其类会破坏布局与交互，正确做法是通过 theme 配置或 CSS 变量统一外观，避免 DOM 干预和加载冲突。
为什么直接用 SweetAlert2 就够了，不需要“集成”Bootstrap？
因为 SweetAlert2 本身是独立样式、零依赖的弹窗库，它不基于 Bootstrap 的 CSS 或 JS。强行套用 Bootstrap 类（比如 btn-primary 或 modal-dialog）反而会破坏其默认布局和交互逻辑——比如按钮 hover 状态错乱、动画卡顿、移动端滚动穿透失效。
如果你看到“Bootstrap 集成 SweetAlert2”的教程，大概率是在做两件多余的事：
① 手动覆盖 SweetAlert2 的 CSS 去匹配 Bootstrap 配色；
② 把 SweetAlert2 的弹窗硬塞进 Bootstrap 的 modal 结构里（这会让 SweetAlert2 的 showConfirmButton、input 等高级功能失效）。
SweetAlert2 和 Bootstrap 共存但互不干扰的关键配置
共存没问题，但得避开冲突点。重点在三处：
- 确保
SweetAlert2的 CSS 在 Bootstrap CSS 之后加载（否则它的.swal2-popup样式可能被 Bootstrap 的.modal规则意外覆盖） - 禁用 Bootstrap 的全局
body滚动锁定（Bootstrap 5 默认会在 modal 打开时加overflow: hidden，而SweetAlert2自己也会锁，双锁会导致页面抖动）——可在初始化前加：document.body.style.overflow = '';
- 如果项目用了 Bootstrap 的
data-bs-toggle="modal"自动绑定，要确认没误绑到SweetAlert2触发元素上（比如给一个button同时写了data-bs-toggle和onclick="Swal.fire(...)"，会触发两次）
想让 SweetAlert2 看起来“像 Bootstrap”？改主题比套类更可靠
别去手动加 class="btn btn-outline-success" 到按钮上——SweetAlert2 的按钮是动态生成的 DOM，且内部有完整事件流。正确做法是用它的内置主题系统或 CSS 变量：
- 用官方
theme: 'bootstrap-5'（需引入sweetalert2-theme-bootstrap-5包，不是 Bootstrap 本体） - 或直接覆盖 CSS 变量，例如在全局 CSS 中写：
:root { --swal2-color: #212529; --swal2-input-border-color: #ced4da; --swal2-confirm-button-color: #0d6efd; } - 按钮文字大小、圆角等，优先通过
customClass配置项注入自定义 class，而不是直接操作 DOM：Swal.fire({ customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-secondary' } })注意：这些 class 只负责外观，不能替代SweetAlert2自身的交互逻辑
遇到 Swal is not defined 或按钮点击无反应？检查加载顺序和模块导入
常见于混合使用 CDN 和 ES 模块的场景：
- CDN 方式：确保
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>在所有调用Swal.fire()的脚本之前 - ES 模块方式（如 Vue/React）：必须显式导入，不能靠全局变量：
import Swal from 'sweetalert2'; // 不是 import * as Swal
- 如果用 Webpack/Vite，确认没有把
SweetAlert2打包进 vendor chunk 后又被 split 出去导致异步加载失败 - jQuery 用户特别注意：不要用
$().on('click', () => Swal.fire())绑定在动态插入的按钮上——SweetAlert2不依赖 jQuery，但事件委托若写错，容易因 DOM 未就绪导致Swal调用时机错误
真正麻烦的从来不是样式统一，而是把两个各自完善的 UI 库强行缝合时，对它们各自生命周期和副作用边界的误判。
