如何将 bootstrap 5 和其他全局包添加到 SvelteKit 项目中？答案

【问题标题】：How to add bootstrap 5 and other global packages to a SvelteKit project?如何将 bootstrap 5 和其他全局包添加到 SvelteKit 项目中？
【发布时间】：2022-11-25 03:16:05
【问题描述】：

我安装了自举使用NPM

在一个普通的svelte项目中，我通常会添加自举以及App.ts 文件中在项目范围内使用的其他包。然而，在一个SvelteKit项目没有主要入口点。

那么推荐的添加方式是什么引导程序 5或其他包裹至SvelteKit全球？

我不想使用汇总插件，而只是想将其作为模块在JavaScript

【问题讨论】：

标签： javascript typescript twitter-bootstrap svelte sveltekit

【解决方案1】：

您可以制作一个顶级__layout 并在那里导入所有内容。

【讨论】：

好像就是这样，还发现有svelte-add，这似乎是未来，但目前没有很多包。

【解决方案2】：

我添加这个是因为这似乎是将包添加到SvelteKit应用程序。

https://github.com/svelte-add/svelte-add

如果你想添加引导程序例如使用

npx svelte-add@latest bootstrap

截至撰写本文时，还没有很多软件包，希望将来会发生变化。

【讨论】：

【解决方案3】：

我发现添加随处可用的外部脚本和样式的最简单方法是将它们添加到

src/app.html

该文件包含所有其他内容，包括 <html> 标记，因此您可以将样式放在 <head> 中，将脚本放在 <body> 中，包括 CDN URL，就像您以前一直做的那样。

此设置允许您轻松覆盖 Bootstrap 设置，例如我在 styles.css 到 unset <body> 的 background-color 中添加了一个由 Bootstrap 设置的样式。

如果您想托管脚本而不是使用 CDN，则将它们放在 src/static 目录中并使用前缀 %sveltekit.assets%/ 引用它们，例如

<link href="%sveltekit.assets%/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="%sveltekit.assets%/bootstrap/dist/js/bootstrap.bundle.min.js">

将 Bootstrap 5.0.2（通过 CDN）添加到默认的 SvelteKit 1.0 骨架项目后，我的 app.html 文件如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width" />
        %sveltekit.head%

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>
    <body>
        <div style="display: contents">%sveltekit.body%</div>
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>
</html>

【讨论】：