I'm working on a project where I need to use Bootstrap alongside a lot of custom CSS files. Until now, I was importing Bootstrap's CSS directly in my index.html file like this :
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
But now I need to import Bootstrap CSS from my node_modules so I've tried to import it in my index.css file like this :
@import "bootstrap/dist/css/bootstrap.min.css";
It is "working" but now, all of Bootstrap CSS declarations, including it's reboots, are overriding my own custom CSS (which wasn't the case until then).
So my question is : is there any way to import a local version of Bootstrap's CSS without having it taking over my custom CSS files ?
I've seen a solution here, but adding a custom body id to ALL my CSS declarations in my many files looks like a bit too much.
You can import the bootstrap.min.css before your 'custom.css', then it won't override your custom CSS.
The solution was to copy bootstrap.min.css inside the public folder and import it in my index.html file. For some reason, it didn't work the first time I tried.
For reference, the import is done like this :
<link
href="css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>