CODEWITHSUNDEEP
bootstrap-4svelte
David Bensoussan
David Bensoussan

Reputation: 3205

How to I import a bootstrap theme in svelte?

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

Upvotes: 2

Views: 822

Answers (1)

DoceAzedo
DoceAzedo

Reputation: 361

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>

Upvotes: 4

Related Questions