If I were to handle this, I'd simply import the files at the top level +layout.svelte.
Here's a basic example:
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
</script>
<slot />
Vite should handle everything else for you. It might be better to import non-minified versions while developing since the build will minify them anyway.
Keep in mind that using this approach may cause server-side rendering issues. It's usually recommended to import components as needed:
import Alert from 'bootstrap/js/dist/alert';
// or, specify specific plugins:
import { Tooltip, Toast, Popover } from 'bootstrap';
You can also import source styles instead of compiled ones.
Since SvelteKit uses Vite, follow the relevant Vite guidelines.
If you prefer importing everything in an SSR-friendly way, consider using URL-import and include a script tag in the head, like so:
<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 />