How can I import local Bootstrap CSS into a React app without overriding my CSS files?-CodePudding

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/[email protected]/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.

CodePudding user response：

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"
    />

CodePudding user response：

You can import the bootstrap.min.css before your 'custom.css', then it won't override your custom CSS.