(React) Bootstrap overwriting my css

Asked

Viewed 193 times

-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?

javascript html css node.js react

  • 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 using React.Lazy and React.Suspense somewhere in the app?

  • 1

    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.

  • 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

  • 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.

1 answer

0

These libs are not component-oriented, so you should call it once in the main file of your webpack. Normally this file would be the app.js.

Browser other questions tagged javascript html css node.js react

You are not signed in. Login or sign up in order to post.