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

Question

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

Red*_*Red 8 javascript twitter-bootstrap typescript svelte sveltekit

我使用NPM安装了bootstrap

在普通svelte项目中，我通常会在文件中添加引导程序和其他在项目范围内使用的包App.ts。然而，在SvelteKit项目中没有主入口点。

那么，将bootstrap 5或其他包全局添加到SvelteKit的推荐方法是什么？

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

Answer 1

Ste*_*aes 7

SvelteKit > 1.0 的更新答案

之前的答案虽然在询问时是正确的，但由于在该版本之前对 SvelteKit 进行了重大重构（但在发布答案之后），因此已经过时了

顶层布局layout现在是一个名为+layout.svelteinstead.的文件。

之前的回答

您可以创建一个顶级__layout并导入其中的所有内容。

Answer 2

isa*_*pir 6

从 SvelteKit 1.0 开始，我发现添加随处可用的静态脚本和样式的最简单方法是将它们添加到

src/app.html

Run Code Online (Sandbox Code Playgroud)

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

此设置允许您轻松覆盖 Bootstrap 设置，例如，我向Bootstrap 设置的's添加了unset样式。<body>background-color

要自己托管脚本而不是使用 CDN，请将它们放入src/static目录中并使用前缀引用它们%sveltekit.assets%/。例如，我放置了文件bootstrap.min.css，bootstrap.bundle.min.js现在src/static/bootstrap-5.0.2/我的src/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="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.min.css" rel="stylesheet">
        <style>
            body {
                /* override Bootstrap */
                background-color: unset;
            }
        </style>
    </head>
    <body>
        <div style="display: contents">%sveltekit.body%</div>
        
        <script src="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.bundle.min.js"></script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果您想使用 CDN 而不是自托管文件，那么对于 Bootstrap 5.0.2，您可以使用以下命令：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，8 月前
查看次数：	7387 次
最近记录：	2 年，9 月前