How to add bootstrap module in a svelte JS app?

Question

I'm very new to svelte ( like many of us ^^ ), and I didn't manage to add bootstrap to my app. Tried to run 'npm add bootstrap' but it said that I need peer jquery dependencie. Here is the terminal render

What I don't understand is why the package has been added and I can't still use the bootstrap classes. Second point, why does it talk about peer dependencies? What's the link here? I don't know if I'm missing something but if you guys got the solution it will help a lot. Thank you

npm add bootstrap

npm WARN bootstrap@4.4.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.

npm WARN svelte-app@1.0.0 No repository field.
npm WARN svelte-app@1.0.0 No license field.

+ bootstrap@4.4.1
added 1 package from 2 contributors and audited 9125 packages in 8.047s
found 0 vulnerabilities```

Answer 1

Your problem is that installing bootstrap into node_modules doesn't automatically include the files in your application. There are a few different ways you can accomplish this.

Option 1: Copy the files to /public manually

1. Download the bootstrap files and place them inside the public folder of your svelte project.
2. Add the css link in public/index.html. <link rel='stylesheet' href='bootstrap/dist/css/bootstrap.min.css'>.

The downside of this approach is that you will need to commit the bootstrap folder to your version control system, which is generally frowned upon.

Option 2: Copy the files to /public using rollup

1. install rollup-plugin-copy
2. Update rollup.config.js to include the copy plugin. Here is a snippet of the important parts from a rollup.config.js file from a fresh svelte install.

//...
import copy from 'rollup-plugin-copy'

export default {
    //...
    plugins: [
        //...
        copy({
            targets: [{ 
                src: 'node_modules/bootstrap/dist/**/*', 
                dest: 'public/vendor/bootstrap' 
            }]
        }),
       //...
    ],
    //...
};

3. Add the css link in public/index.html. <link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>