时间戳

首页 > 解决方案 > 如何在 svelte 中导入引导主题？

bootstrap-4 - 如何在 svelte 中导入引导主题？

问题描述

我前段时间买了一个引导主题，并在纯 html 和 css 中使用它。请注意，我不是网络开发人员。

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

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

谢谢

标签： bootstrap-4svelte

解决方案

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

您可以像往常一样在“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>

推荐阅读