0

I have started learning React with the "create react app with webpack" configuration. I import css like this in react component js

import '../dist/css/bootstrap.min.css';
import '../dist/css/main.css';

but when webpack compiles the css, my main.css rule is overlapping with bootstrap.css. How do I fix this without adding '!important' in my main.css and inline styling in .js file? I also have a global css rule to set like h1,h2,h3 dll to separate files?

Aurora0001
  • 13,139
  • 5
  • 50
  • 53
cahyowhy
  • 553
  • 2
  • 9
  • 26
  • 1
    It's difficult to give a definite answer without knowing your entire configuration, but generally speaking, `import` does not guarantee the resolve order. You could try to import a single CSS file, in which you'll `@import` both `bootstrap.css` and `main.css`. I believe that it should solve your problem. – Or B Feb 18 '17 at 14:26
  • Agree with @OrB. It might also be helpful if you could post your global rule, if that is the one that is in conflict. – MaxPRafferty Feb 18 '17 at 19:41

0 Answers0