title: Angular 2 Material theme refer to color in SCSS
body: <p>I've created a custom theme with the official <a href="https://material.angular.io/guide/theming" rel="nofollow noreferrer">guide</a>.</p>
  
  <pre class="lang-scss prettyprint-override"><code>@import '../node_modules/@angular/material/core/theming/_all-theme';
  @include mat-core();
  
  $primary: mat-palette($mat-teal);
  $accent: mat-palette($mat-deep-orange);
  $warn: mat-palette($mat-amber);
  
  $theme: mat-light-theme($primary, $accent, $warn);
  
  @include angular-material-theme($theme);
  </code></pre>
  
  <p>It actually does work.
  I can set the color of a <code>md-toolbar</code> or <code>md-button</code> with <code>$primary</code>. 
  But I can't access the color variables within a SCSS of a component.</p>
  
  <pre class="lang-scss prettyprint-override"><code>:host {
    .mat-grid-tile-header {
      background-color: $primary;
    }
  }
  </code></pre>
  
  <p>Error in Webstorm:</p>
  
  <pre><code>"Element 'primary' is resolved only by name without using of explicit imports"
  </code></pre>
  
  <p>Error after build failed: 
  "Undefined variable"</p>
  
  <p>Okey, I somehow have to import it. But I don't get how.</p>
  
  <p>I've tried importing the theme:</p>
  
  <pre class="lang-scss prettyprint-override"><code>@import "../../../theme.scss";
      :host {
        .mat-grid-tile-header {
          background-color: $primary;
        }
      }
  </code></pre>
  
  <p>The error in Webstorm has gone away, but a new error after the build appeared:</p>
  
  <pre><code>Module build failed: 
  undefined
              ^
        (50: #e0f2f1, 100: #b2dfdb, 200: #80cbc4, 300: #4db6ac, 400: #26a69a, 500: #009688, 600: #00897b, 700: #00796b, 800: #00695c, 900: #004d40, A100: #a7ffeb, A200: #64ffda, A400: #1de9b6, A700: #00bfa5, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: white, 700: white, 800: rgba(255, 255, 255, 0.87), 900: rgba(255, 255, 255, 0.87), A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: rgba(0, 0, 0, 0.87), A700: rgba(0, 0, 0, 0.87)), default: #009688, lighter: #b2dfdb, darker: #00796b, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": rgba(255, 255, 255, 0.87), "900-contrast": rgba(255, 255, 255, 0.87), "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": rgba(0, 0, 0, 0.87), "A700-contrast": rgba(0, 0, 0, 0.87), "contrast-contrast": null) isn't a valid CSS value.
  </code></pre>
  
  <p>Does someone know how to solve this problem?
  Thanks in advance!</p>