-1
Hello, everyone. I’m a beginner with React and I was developing a front-end application and decided to use the bootstrap to make a slide. I installed the bootstrap through npm install and installed jquery and Popper.js to use the elements with javascript. However bootstrap is overwriting my css, no matter what order I import things in, it keeps overwriting. The import is like this:
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import './carousel-style.scss';
Can someone help me?
Are you importing your css after bootstrap? (in the code I don’t see your css). And this is only in production (after you use the
npm run build
) or developing as well (npm start
)? Are you usingReact.Lazy
andReact.Suspense
somewhere in the app?– Rafael Tavares
I edited out my piece of code for better visualization. Yes, I’m importing my css last and this is happening in development, at the moment I’m not deploying. I’m not using either React.Lazy or React.Suspense.
– Maria Beatriz Almeida
Ok. Can you also share the CSS code that is being overwritten and the interpretation in the browser, showing what replaced this CSS? Maybe the HTML for
carousel
or the return of.jsx
help you better understand the problem as well– Rafael Tavares
Ah, I forgot to mention that at the time these imports were on Carousel.js and were altering various elements of the index js. which is where I’m importing the slide. I tried to put imports in the index js. before the index css, but continued the same way.
– Maria Beatriz Almeida