I have a React web site using a local scss compiled to css file. But now I want in one and only one of the components to use Bootstrap.
I've followed https://reactstrap.github.io/ and got it working. But bootstrap is now applied to all the site, because I have this
import 'bootstrap/dist/css/bootstrap.min.css';
in my index.js file
If I then take the import out of index.js and place it in my component, bootstrap is still applied to the entire site.
Do I have to import bootstrap into this component and only this component using some form of React css-module loading ? Is there a way of restricting the scope of bootstraps entire css file ?
I know that in javascript something like this could be done dynamically, pseudo code below
var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);
then it can be added again