javascriptbootstrap-5sveltesveltekit

How do I import Bootstrap in SvelteKit, Recommended Way?

I am building a site with SvelteKit. As of now I included Bootstrap 5 in my project by adding it to the app.html file provided by the SvelteKit Skeleton project:

<!-- Bootstrap styles and javascript --> 
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Now when building the site with npm run build the bootstrap modules are not loaded anymore.

Solution

  • I would probably just import the files in the top level +layout.svelte.

    Something along the lines of:

    <script>
  import 'bootstrap/dist/css/bootstrap.min.css';
  import 'bootstrap/dist/js/bootstrap.bundle.min.js';
</script>
<slot />

    Vite should take care of the rest. (You can also import the non-minified versions for a better dev experience, as the build should minify anyway.)

    Note that this will cause issues with server-side rendering, and generally it is recommended to import components like this as necessary:

    import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';

    You can also import style sources rather than the compiled styles. SvelteKit uses Vite, so the respective Vite guidelines should be applicable.

    If you just want to import everything in an SSR compatible way, you can use a URL-import and add a script tag to the head, e.g.:

    <script>
  import 'bootstrap/dist/css/bootstrap.css';
  import scriptSrc from 'bootstrap/dist/js/bootstrap.bundle.js?url';
</script>
<svelte:head>
  <script src={scriptSrc}></script>
</svelte:head>
<slot />