如何在 SvelteKit 中导入 Bootstrap，推荐方式？

Question

我正在使用 SvelteKit 构建一个网站。截至目前，我通过将 Bootstrap 5 添加到 SvelteKit Skeleton 项目提供的 app.html 文件中来将其包含在我的项目中：

<!-- Bootstrap styles and javascript --> 
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

现在，当使用引导模块构建站点时，npm run build不再加载。

Answer 1

我可能只会导入顶层的文件+layout.svelte。

大致如下：

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

剩下的事情就由 Vite 来处理吧。（您还可以导入非缩小版本以获得更好的开发体验，因为无论如何构建都应该缩小。）

请注意，这会导致服务器端渲染出现问题，通常建议根据需要导入这样的组件：

import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';

您还可以导入样式源而不是编译的样式。SvelteKit 使用 Vite，因此应适用相应的 Vite 指南。

如果您只想以 SSR 兼容方式导入所有内容，您可以使用URL 导入并向 中添加脚本标签head，例如：

<script>
  import 'bootstrap/dist/css/bootstrap.css';
  import scriptSrc from 'bootstrap/dist/js/bootstrap.bundle.js?url';
</script>
<svelte:head>
  <script src={scriptSrc}></script>
</svelte:head>
<slot />