使用@sveltejs/adapter-static结合Bootstrap生成静态站点失败求助

你的Bootstrap导入方式确实存在问题，导致构建报错的核心原因是：SvelteKit在构建时会执行服务端渲染（SSR），而Bootstrap的JS代码会访问浏览器环境特有的document对象，Node.js服务端环境中没有这个对象，因此抛出ReferenceError。开发环境正常是因为dev模式下的渲染逻辑更偏向客户端优先，不会触发服务端的这个错误。

正确的导入配置方式 #

1. CSS导入保持不变

CSS文件可以直接在根布局src/routes/+layout.svelte中导入，SvelteKit会正确处理样式的服务端注入：

<script>
  import 'bootstrap/dist/css/bootstrap.min.css';
</script>

2. JS代码仅在客户端加载

需要确保Bootstrap的JS只在浏览器环境中执行，有两种常用实现方式：

方式一：使用onMount钩子（推荐）

onMount是Svelte的生命周期钩子，仅在客户端组件挂载后执行，完全避开服务端渲染阶段：

<script>
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { onMount } from 'svelte';

  onMount(async () => {
    // 动态导入Bootstrap完整JS包（包含Popper.js）
    await import('bootstrap/dist/js/bootstrap.bundle.min.js');
  });
</script>

方式二：使用browser环境变量判断

通过SvelteKit提供的browser变量检测当前环境，仅在客户端时导入JS：

<script>
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { browser } from '$app/environment';

  if (browser) {
    // 动态导入Bootstrap JS
    import('bootstrap/dist/js/bootstrap.bundle.min.js');
  }
</script>

3. 按需导入（可选，优化体积）

如果你只用到Bootstrap的部分组件，可以按需导入对应的模块，减少打包体积：

<script>
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { onMount } from 'svelte';

  onMount(async () => {
    // 仅导入模态框组件
    const { Modal } = await import('bootstrap/dist/js/bootstrap.bundle.min.js');
    // 后续可初始化Modal实例
    // new Modal(document.getElementById('exampleModal'));
  });
</script>

验证构建 #

修改完成后，重新执行npm run build即可正常完成静态站点的构建，不会再出现document is not defined的错误。

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