Menu
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 [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.
+ [email protected]
added 1 package from 2 contributors and audited 9125 packages in 8.047s
found 0 vulnerabilities```
808
Download the bootstrap files and place them inside the public folder of your svelte project. 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.
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. Download the bootstrap files and place them inside the public folder of your svelte project.
Then, once you've got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with new: You can then interact with app using the component API if you need to. loading editor...
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.
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.
/public manuallypublic folder of your svelte project.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.
/public using rolluprollup.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'
}]
}),
//...
],
//...
};
public/index.html. <link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>
52
This answer is an addition to the accepted answer's second option. (I cannot comment yet..)
Instead of copying all of Bootstrap's files to the public folder, you can also pick and choose. For example, I only needed the minified CSS and the bundled minified JavaScript, so I configured the copy plugin like this:
//...
import copy from "rollup-plugin-copy";
export default {
//...
plugins: [
//...
copy({
targets: [
{
src: "node_modules/bootstrap/dist/css/bootstrap.min.css",
dest: "public/vendor/bootstrap/css",
},
{
src: "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
dest: "public/vendor/bootstrap/js",
},
],
}),
//...
],
//...
};
The CSS can be included in the <head> tag in public/index.html:
<link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>
The JavaScript can be included inside of the <body> tag (at the end) in public/index.html:
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
