title: How to reference in directory of SCSS file from component?
body: <p>Currently I have the following directory structure:</p>
  
  <pre><code>stylesheets
  ..modules
  ...._all.scss
  ...._colors.scss
  ..partials
  ...._all.scss
  ...._Home.scss
  ..main.scss
  </code></pre>
  
  <p>And in my <code>_Home.scss</code> I have:</p>
  
  <pre><code>@import '../modules/all';
  
  .headerStyle {
    color: pink;
    font-size: 15;
    font-weight: 500;
  }
  </code></pre>
  
  <p>And in my <code>main.scss</code> I import all the <code>_all.scss</code> in stylesheets folder like: </p>
  
  <pre><code>@import 'modules/all'
  @import 'partials/all'
  
  html { font-family: 'Roboto', sans-serif; }
  body {
    margin: 0;
    background-color: orange
  }
  </code></pre>
  
  <p>And lastly in my component, I would import the stylesheet like so:</p>
  
  <pre><code>import '../../stylesheets/main.scss'
  
  ...
  
  &lt;div className="headerStyle"&gt;Header&lt;/div&gt;
  </code></pre>
  
  <p>Yet, the div is not being styled with <code>.headerStyle</code> in <code>_Home.scss</code>. I checked the directory path to <code>main.scss</code> and it is correct, and I'm not getting any errors.</p>
  
  <p>And the following is actually being applied:</p>
  
  <pre><code>body {
    margin: 0;
    background-color: orange
  }
  </code></pre>
  
  <p>What could I be doing wrong? And is there a better way to import stylesheets into a component rather than having to define it every time for a component? </p>
  
  <p>Thank you in advance and will upvote/accept answer. </p>