How to use Bootstrap in Svelte apps (using CDN)

 Bootstrap is one of most used CSS/Sass framework nowadays, even though the bundle size is larger than that of TailwindCSS.

 

So how do we use Bootstrap in Svelte and Svelte kit. Importing the CDN link from the entry point would be an ideal approach.

Svelte

In Svelte apps we can use the app.svelte to import the Link and scripts. Svelte provides svelte:head component for including external links or just use a regular head tag.

<svelte:head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

</svelte:head> 

Svelte Kit

In Svelte Kit there is no entry point, so we can use +page.svelte component file for including bootstrap CSS. For global css , +layout.svelte would be the right place. 

Additionally you may require Sass which require configure svelte preprocess. See the Sass guides. 📖

Read More

Configure Sass in Svelte Kit

 Sass is the most mature, stable, and powerful professional grade CSS extension language. Svelte simplify the use of Sass. 

 

In order to use Sass or scss in Svelte app we have to use the preprocess.

First up all install the node dependencies and sass.

npm i --save-dev bootstrap node-sass svelte-preprocess

In our project locate the  svelte.config.js and import the svelte preprocess and add it to the config object as follows.

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */

const config = {
kit: {
adapter: adapter()

},
preprocess: [preprocess() ]
};
export default config;

Lets make sure it is working and a simple scss style.

<style lang="scss" type="text/scss" >

$color: red;
h1{
color: $color;
}

</style> <h1>Hello world</h1>

 The heading will be show up in red. 😆

Read more sass guides

Read More