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

vyu0f0g1 于 2022-11-26 发布在 TypeScript

关注(0)|答案(3)|浏览(206)

我使用 NPM 安装了 * 引导程序 *
在一个普通的svelte项目中，我通常会在App.ts文件中添加 bootstrap 和其他包，这些包在项目范围内使用。但是，在 SvelteKit 项目中没有主入口点。
那么，将 bootstrap 5 或其他 * 软件包 * 全局添加到 SvelteKit 的推荐方法是什么？
我不想使用汇总插件，而只想将其作为JavaScript中的 module 导入

typescript

来源：https://stackoverflow.com/questions/71952922/how-to-add-bootstrap-5-and-other-global-packages-to-a-sveltekit-project

3条答案

按热度按时间

fcg9iug31#

您可以创建一个顶级__layout，并在那里导入所有内容。

赞(0）回复(0）举报 2022-11-26

zzlelutf2#

我添加这一点是因为这似乎是向 SvelteKit 应用程序添加包的好方法。
https://github.com/svelte-add/svelte-add
例如，如果要添加 Bootstrap，请使用

npx svelte-add@latest bootstrap

到写这篇文章的时候，还没有很多软件包，希望将来会有变化。

赞(0）回复(0）举报 2022-11-26

uubf1zoe3#

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

src/app.html

这个文件包含了包括<html>标签在内的所有内容，因此您可以像以前一样将样式放在<head>中，将脚本放在<body>中，包括CDN URL。
此设置允许您轻松覆盖引导程序设置，例如，我向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>

如果您希望使用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>

赞(0）回复(0）举报 2022-11-26

我来回答

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

3条答案

相关问题

热门标签

最新问答