如何在 svelte 中导入 bootstrap 主题？

Question

我前段时间买了一个 bootstrap 主题，并用它与普通的 html 和 css 一起使用。请注意，我不是网络开发人员。

拿到主题的时候，里面有一个demo，我不得不用gulp。然后它会生成一个包含资产的 dist 目录，最终获得一些 js 文件：plugins.bundle.js 和 scripts.bundle.js，它们包含在每个带有 <script> 标签的 html 页面中。我不知道如何将它们包含在 Svelte 中。

我是否需要在使用 gulp 编译之前传递源代码？或者我该如何进行？

谢谢

Answer 1

您可以将生成的所有资源移动到 Svelte 项目的“public”文件夹，然后您有两个选择。

您可以照常将它们导入“index.html”，也可以导入“public”文件夹，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/build/bundle.css'>
    <script src="/plugins.bundle.js"></script>
    <script src="/scripts.bundle.js"></script>
    <!-- ... -->

    <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

或者您可以通过使用“App.svelte”文件顶部的特殊 svelte:head 元素来做到这一点：

<svelte:head>
    <script src="/plugins.bundle.js"></script>
    <script src="/scripts.bundle.js"></script>
    <!-- ... -->
</svelte:head>

如何在 svelte 中导入 bootstrap 主题？

How to I import a bootstrap theme in svelte?

bootstrap-4

svelte