How to I import a bootstrap theme in svelte?

user_1717026 0
Viewed 336

I bought a bootstrap theme some time ago and was using it with plain html and css. Note that I am no web developer.

When I got the theme, there was a demo inside, on I had to use gulp. It would then generate a dist directory with assets to finally obtain some js files: plugins.bundle.js and scripts.bundle.js that are included in every html page with a <script> tag. I don't see how I can include those in Svelte.

Do I need to pass the source before it is compiled with gulp instead? Or how should I proceed?

Thank you

bootstrap-4 svelte
1 Answers

You may move all the assets you have generated to the "public" folder of your Svelte project, then you have two options.

You can import them as usual in your "index.html", also in the "public" folder, like this:

<!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>

Or you can do that by using the special svelte:head element at the top of your "App.svelte" file:

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