title: Getting Undefined variable error when compiling SCSS using node-sass
body: <p><strong>package.json</strong> </p>
  
  <pre><code>"scripts": {
    "compile:sass": "node-sass sass/main.scss css/style.css -w"
  }
  </code></pre>
  
  <p><strong>main.scss</strong> </p>
  
  <pre><code>@import "abstracts/variables";
  @import "base/typography";  
  </code></pre>
  
  <p><strong>_variables.scss</strong></p>
  
  <pre><code>$color-light-grey: #777;
  $color-white: #fff;   
  </code></pre>
  
  <p><strong>_typography.scss</strong></p>
  
  <pre><code>body {
    color: $color-light-grey;
  }
  .heading-primary {
    color: $color-white;
  }
  </code></pre>
  
  <p>Now my issue is when I'm trying to compile with <code>npm run compile:sass</code> it throws the following error:</p>
  
  <blockquote>
    <p>"message": "Undefined variable: \"$color-light-grey\"."</p>
  </blockquote>