title: How to use $variables from one scss file to another
body: <p>I'm working with Angular 4 application. Below is my code looks like.</p>
  
  <h2>variables.scss</h2>
  
  <pre><code>$primary: blue;
  $secondary: red;
  </code></pre>
  
  <p>Defining $variables.</p>
  
  <h2>styles.scss</h2>
  
  <pre><code>@import './assets/variables';
  </code></pre>
  
  <p>Importing variables.scss file in styles.scss</p>
  
  <h2>angular-cli.json</h2>
  
  <pre><code>"styles": [
          "styles.scss"
        ]
  </code></pre>
  
  <p>Importing styles.scss file in angular-cli.json so that whatever the imports in styles.scss file can use my entire project.</p>
  
  <h2>header.html</h2>
  
  <pre><code>&lt;h1 class="primary-color"&gt;Header&lt;/h1&gt;
  </code></pre>
  
  <p>Defined primary-color class in header.html file</p>
  
  <h2>header.scss</h2>
  
  <pre><code>.primary-color{
      color: $primary;
  }
  </code></pre>
  
  <p>Trying to use $primary variable in header.scss file. But compiler throws me with error message as </p>
  
  <blockquote>
    <p>Undefined variable: "$primary".</p>
  </blockquote>
  
  <p>I tried to import variables.scss file in header.scss file and now it works fine as it displays text "Header" in blue color. Now my header.scss file looks like below.</p>
  
  <h2>header.scss</h2>
  
  <pre><code>@import "~assets/variables.scss";
  .primary-color{
      color: $primary;
  }
  </code></pre>
  
  <p>Now my questions is why should we import again in header.scss file though we already imported in styles.scss file? I don't like to import in every scss page because I've to use those $variables in so many scss files. Any thoughts/alternate-ideas please?</p>