Search code examples
twitter-bootstrapbootstrap-4sveltesapper

How could we add Bootstrap 4 to Sapper app?

I have create new sapper app and want to use twitter-bootstrap 4 in it. How can we add bootstrap css and js in it?

Solution

  • I suppose you're going to use it all over the app so I'd recommend adding the CSS and JS CDN resources to template.html.

    <!doctype html>
<html lang='en'>
<head>
   <meta charset='utf-8'>

   %sapper.base%
   ...
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   
   %sapper.styles%
   %sapper.head%
</head>
<body>

   %sapper.scripts%

   <!-- Bootstrap scripts -->
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

    Keep in mind you can't use $ in Svelte so you'll need to use the window.jQuery global directly. As window does not exist in the server, you'll need to wrap your jQuery calls in the onMount hook.

    <script>
   import { onMount } from 'svelte';
   
   onMount(() => {
      window.jQuery('.alert').alert();
   })
</script>