首先，我们一步步排查并解决你的问题：

1. 先确认资源引入的正确性 #

你当前的资源引入顺序是正确的（基础样式 → 主题样式 → JS），但需要确保主题包版本和SweetAlert2版本匹配，避免样式冲突。建议明确指定主题包的对应版本，比如和你使用的SweetAlert2 v11.15.10匹配的@sweetalert2/theme-minimal@5.0.18：

<!-- 基础SweetAlert2样式 -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.min.css" rel="stylesheet">
<!-- Minimal主题样式（必须在基础样式之后引入，确保覆盖默认样式） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-minimal@5.0.18/minimal.css">
<!-- SweetAlert2核心JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.all.min.js"></script>

2. 调整弹窗配置实现小型效果 #

Minimal主题的默认尺寸可能不符合你的需求，你可以通过SweetAlert2的内置配置项直接缩小弹窗，再配合少量自定义样式优化细节：

优化后的JS代码

if (document.getElementById("fname").value === "") {
  Swal.fire({
    title: "Error!",
    text: "Please enter your name!",
    icon: "error",
    // 移除theme参数（已通过CSS加载Minimal主题，无需重复指定）
    width: "280px", // 直接设置弹窗宽度，缩小整体尺寸
    padding: "1rem", // 减少弹窗内边距
    customClass: {
      popup: "small-swal-popup" // 自定义类，用于进一步调整细节
    },
    heightAuto: false // 可选：固定高度，避免内容自适应导致的多余空间
  });
  return false;
}

补充自定义CSS（放在页面的<style>标签中）

.small-swal-popup {
  font-size: 0.85rem; /* 缩小弹窗内的文字大小，让整体更紧凑 */
}

3. 为什么这样能解决问题？ #

• 版本匹配的主题包：避免因版本不一致导致的样式不生效或错乱
• 内置配置项width和padding：直接从弹窗整体尺寸入手，快速缩小弹窗
• 自定义类：可以灵活调整文字大小、按钮样式等细节，让弹窗完全贴近你想要的效果

按照上述配置后，你的弹窗会呈现Minimal主题的简洁风格，同时尺寸会大幅缩小，和你提供的示例图效果一致。

备注：内容来源于stack exchange，提问作者Boidurja Talukdar