How to include external CSS and Scripts in Svelte

 One of the problem I was faced in Reactjs and Vue is linking external style sheets and script from CDN which may require special approach.
 

In Svelte we can include the CSS and Script using the dedicated <svelte:head> tag.

<svelte:head>

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" ...>

</svelte:head>

Sometimes we also need to add external script which provide special functionality to our app, such as bootstrap carousel actions.  drop the script at the head section.

<svelte:head>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" ... crossorigin="anonymous"></script>

</svelte:head>

Svelte also let us import external CSS using the import statement in styles.

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css");