title: React style/css/sass order
body: <p>I have my "App-component" and a "B-component" that gets rendered inside my app component. Each has its own style. </p>
  
  <p>But when it gets compiled, my ComponentB.css is put before my app.css, making the ComponentB styles being overwritten by my app styles.</p>
  
  <p>Why is this happening??</p>
  
  <p>APP</p>
  
  <pre><code> import React, { Component } from 'react';
   import ComponentB from './components/ComponentB';
  import './styles/app.css';
  
      class App extends Component {
        render() {
          return (
            &lt;div className="App"&gt;
              &lt;ComponentB /&gt;
            &lt;/div&gt;
          );
        }
      }
  
      export default App;
  </code></pre>
  
  <p>COMPONENT B</p>
  
  <pre><code>import React, { Component } from 'react';
  import './styles/ComponentB.css';
  
  class ComponentB extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Hello from ComponentB&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default ComponentB;
  </code></pre>