title: Angular 2 Custom Theme , SCSS error
body: <p>I am new to Angular 2, and brand new to SCSS (I have always used css). I am trying to setup a custom theme for my angular-cli project that goes along with our branding colors.</p>
  
  <p>I found a stackoverflow question (<a href="https://stackoverflow.com/questions/41440998/angular2-material-real-custom-theming">Angular2 Material - Real custom theming?</a>) that I thought would work, but sadly I am getting a error that looks like a problem with Angular 2 parsing my .scss custom theme file. I have made the necessary addition of my .scss file in the angular-cli.json located in the root of the application, and placed the new .scss file in the src folder alongside the style.css originally created by angular-cli project setup. Below is the .scss file I created.</p>
  
  <pre><code>@import '~@angular/material/core/theming/all-theme';
  
  @include md-core();
  
  $ae-brand-indigo: (
      50: #e0ebf3,
      100: #b3cee1,
      200: #80adce,
      300: #4d8cba,
      400: #2673ab,
      500: #005a9c,
      600: #005294,
      700: #00488a,
      800: #003f80,
      A200: #6a9bff,
      A400: #3778ff,
      A700: #1e67ff,
      contrast: (
          50: $black-87-opacity,
          100: $black-87-opacity,
          200: $black-87-opacity,
          300: $black-87-opacity,
          500: white,
          600: white,
          700: white,
          800: white,
          900: white,
          A100: $black-87-opacity,
          A200: $black-87-opacity,
          A400: $black-87-opacity,
          A700: white,
      )
   );
  
  $ae-brand-orange: (
      50: #fef3e4,
      100: #fde0bb,
      200: #fccc8e,
      300: #fab861,
      400: #f9a83f,
      500: #f8991d,
      600: #f7911a,
      700: #f68615,
      800: #f57c11,
      900: #f36b0a,
      A100: #ffffff,
      A200: #fff1e9,
      A400: #ffd1b6,
      A700: #ffc19c,
      contrast: (
          50: $black-87-opacity,
          100: $black-87-opacity,
          200: $black-87-opacity,
          300: $black-87-opacity,
          400: $black-87-opacity,
          500: white,
          600: white,
          700: white,
          800: white,
          900: white,
          A100: $black-87-opacity,
          A200: $black-87-opacity,
          A400: $black-87-opacity,
          A700: white,
     )
   );
  
  // mandatory stuff for theming
  $ae-primary: md-palette(ae-brand-indigo);
  $ae-accent:  md-palette($ae-brand-orange);
  $ae-warn: md-palette($md-red);
  
  // include the custom theme components into a theme object
  $ae-main-theme: md-light-theme($ae-primary, $ae-accent, $ae-warn);
  
  // include the custom theme object into the angular material theme
  @include angular-material-theme($ae-main-theme);
  </code></pre>
  
  <p>I get the following error stacktrace when building and starting up my dev server.</p>
  
  <blockquote>
    <p>ERROR in
    ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/ae-main-<br>
    theme.scss Module build failed: undefined
            ^   Argument <code>$map</code> of <code>map-get($map, $key)</code> must be a map</p>
    
    <p>Backtrace:
        node_modules/@angular/material/core/theming/_theming.scss:19, in<br>
        function <code>map-get</code>
        node_modules/@angular/material/core/theming/_theming.scss:19, in 
        function <code>md-palette</code>
        stdin:76
        in C:\Users\jstafford\Desktop\working\ae-<br>
        ui\node_modules\@angular\material\core\theming_theming.scss (line 19, 
        column 14)
        @ ./src/ae-main-theme.scss 4:14-166
        @ multi styles</p>
    
    <p>ERROR in ./src/ae-main-theme.scss)` must be a map</p>
  </blockquote>
  
  <p>Now, I know I am defining a custom palette here. The only examples I have seen on the material 2 getting started page use $md-red, $md-indigo and the different hues of that color that are predefined. Can anyone help me to get this working so I can truly customize like I saw <a href="https://stackoverflow.com/questions/41440998/angular2-material-real-custom-theming">here</a>.  <strong>What am I missing?</strong></p>