I installed bootstrap using NPM
In a normal svelte project I usualy add bootstrap and other packages, which are used project wide, in the App.ts file. However, in a SvelteKit project there is no main entry point.
So what is the recommended way of adding bootstrap 5 or other packages to SvelteKit globally?
I don't want to use rollup plugins, but rather just want to import it as an module in JavaScript
I installed bootstrap using NPM
In a normal svelte project I usualy add bootstrap and other packages, which are used project wide, in the App.ts file. However, in a SvelteKit project there is no main entry point.
So what is the recommended way of adding bootstrap 5 or other packages to SvelteKit globally?
I don't want to use rollup plugins, but rather just want to import it as an module in JavaScript
4 Answers
Reset to default 7updated answer for SvelteKit > 1.0
The previous answer, while correct at the time of asking, has been outdated since a major refactor to SvelteKit prior to that release (but after posting the answer)
The top level layout layout is now a file called +layout.svelte instead.
previous answer
You can make a top level __layout and import everything there.
As of SvelteKit 1.0, the easiest way I found to add static scripts and styles that will be available everywhere is to add them to
src/app.html
That is the file that includes everything else including the <html> tag, so you can place the styles in the <head> and the scripts in the <body>, including CDN URLs, like you have always done before.
This setup allows you to easily override Bootstrap settings, e.g. I added a style to unset the <body>'s background-color that is set by Bootstrap.
To host the scripts yourself rather than use a CDN, put them in the src/static directory and reference them using the prefix %sveltekit.assets%/. For example, I placed the files bootstrap.min.css and bootstrap.bundle.min.js in src/static/bootstrap-5.0.2/ so now my src/app.html file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
<link href="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.min.css" rel="stylesheet">
<style>
body {
/* override Bootstrap */
background-color: unset;
}
</style>
</head>
<body>
<div style="display: contents">%sveltekit.body%</div>
<script src="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.bundle.min.js"></script>
</body>
</html>
If you want to use a CDN instead of self hosting the files then for e.g. for Bootstrap 5.0.2 you can use the following:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I add this because this seems to be a good way for adding packages to a SvelteKit app.
https://github.com/svelte-add/svelte-add
If you want to add Bootstrap for example use
npx svelte-add@latest bootstrap
As of date of writing this, there are not alot of packages yet, hopefully that changes in the future.
Firstly run npm install bootstrap inside your sveltekit project.
Then
In your root +layout.svelte put
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
</script>
References
- https://vitejs.dev/guide/features.html#css
- https://vitejs.dev/guide/assets.html#explicit-url-imports