React-Bootstrap and Bootstrap-sass modal.scss not loading

Question

I have a react application, which uses react-bootstrap + bootstrap-sass.

I´m loading the bootstrap.scss file in my main app.scss like this:

@import '~bootstrap-sass/assets/stylesheets/_bootstrap';

In my page, I implemented a simple Component from React-Bootstrap.

But the modal window has no CSS whatsoever, so it looks really bad.

I´ve tried to load the modal.scss directly

@import '~bootstrap-sass/assets/stylesheets/bootstrap/_modals';

But still no styles are applied. (the modal appears and hides as expected though).

Bootstrap scss is loaded though, as the styles on buttons, dropdowns, etc is present.

Answer 1

You you need to import the compiled CSS into the component JSX files that it applies to.