最稳方案是在+layout.svelte中导入CSS并用?url导入JS：import 'bootstrap/dist/css/bootstrap.min.css'; import scriptSrc from 'bootstrap/dist/js/bootstrap.bundle.js?url';，再通过<script src="{scriptSrc}" defer></script>在客户端加载，避免SSR报错和路径404。
直接在 +layout.svelte 里导入 CSS + URL 加载 JS 是最稳的方案
ssr（服务端渲染）环境下，document 和 window 不存在，所以任何依赖 dom 初始化的 js（比如 bootstrap 的 tooltip、modal）如果在顶层 script 块里直接 import 'bootstrap/dist/js/bootstrap.bundle.js'，服务端会报错。vite 构建也不处理 /node_modules/ 下裸路径的 <script src></script> 引用，导致生产环境路径 404。
正确做法是把 CSS 当模块导入，JS 则用 Vite 的 ?url 导入器生成带哈希的静态路径，并通过 <script src></script> 在客户端加载：
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import scriptSrc from 'bootstrap/dist/js/bootstrap.bundle.js?url';
</script>
<head>
<script src="{scriptSrc}" defer></script>
</head>
<slot />
-
defer确保脚本不阻塞 HTML 解析，且在 DOM 构建完成后执行 -
?url返回的是类似/assets/bootstrap.bundle.abc123.js的路径，天然适配构建输出和 public 目录部署 - 不要在
onMount里手动new Tooltip(...)—— bundle 已含自动初始化逻辑，重复调用反而出错
别碰 app.html 里硬写 <link> 和 <script>
看似简单，实则埋雷：本地开发可能正常，但构建后 CSS/JS 路径常变成 /bootstrap.min.css 这种根路径，而实际资源被 Vite 打包进了 /assets/；更严重的是，Bootstrap JS 会在服务端尝试访问 document.body，直接抛 ReferenceError: document is not defined。
如果你非要在 app.html 加东西，只允许加纯静态资源（比如 CDN）——但这就失去本地开发一致性、无法离线调试、版本难锁定，不推荐。
- CDN 方式示例（仅限原型验证）：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script> - CDN 缺点：网络波动时首屏白屏、无源码映射、无法 tree-shake、无法 patch 本地修改
想按需引入组件？用 ES 模块语法直接导入单个 JS 文件
Bootstrap 5+ 完全支持 ESM，不需要整个 bundle。比如你只用 Toast 和 Dropdown，就可以在组件里精准导入：
import { Toast } from 'bootstrap';
import { Dropdown } from 'bootstrap';
注意两点：
- 必须确保
@popperjs/core已安装（npm install @popperjs/core），否则Dropdown、Tooltip等依赖 Popper 的组件会静默失败 - CSS 仍需全局导入（如
+layout.svelte中），否则样式丢失 —— ESM 导入 JS 不带 CSS - 不要在
onMount外部调用Toast构造函数，Svelte 组件尚未挂载，document.querySelector找不到目标元素
bootstrap-sass 不适合新项目，尤其别和 SvelteKit 混用
bootstrap-sass 是 Bootstrap 3 的 Sass 移植版，早已停止维护（最后更新是 2018 年），不兼容 Bootstrap 5 的 CSS 变量、RTL 支持、深色模式等特性。它的文档里还写着 bower 和 Ruby on Rails，跟当前 SvelteKit + Vite 生态完全脱节。
如果你看到 CSDN 博客推荐它，大概率是旧项目迁移遗留或未验证的方案。真要 Sass 定制，请直接用官方 bootstrap/scss 源码：
- 安装
npm install bootstrap sass - 新建
src/lib/styles.scss，用@import 'bootstrap/scss/functions'; @import 'bootstrap/scss/variables'; ...按需引入 - 在
+layout.svelte中import '../lib/styles.scss';（需 Vite 配置sass插件）
真正麻烦的不是“怎么加”，而是“加完之后 JS 组件不响应点击”——八成是忘了 defer 或漏了 @popperjs/core，这两个点卡住的人最多。
