Address comments

src/demo-app/demo-app/demo-app-theme.scss

@@ -0,0 +1,16 @@
+@import '@angular/material/core/theming/all-theme';
+
+// Include core material styles.
+@include mat-core();
+
+$primary: mat-palette($mat-indigo);
+$accent:  mat-palette($mat-pink);
+
+$light-theme: mat-light-theme($primary, $accent);
+$dark-theme: mat-dark-theme($primary, $accent);
+
+@include angular-material-theme($light-theme);
+
+.demo-dark-theme {
+  @include angular-material-theme($dark-theme);
+}

src/demo-app/demo-app/demo-app.scss

@@ -1,19 +1,3 @@
-// The default indigo-pink theme will load through the index file. This makes the SCSS build faster
-// since Sass doesn't need to build a "prebuilt" theme again.
-@import '../../lib/core/theming/all-theme';
-
-.demo-dark-theme {
-  // Include core material styles.
-  @include mat-core();
-
-  $primary: mat-palette($mat-indigo);
-  $accent:  mat-palette($mat-pink);
-  $dark-theme: mat-dark-theme($primary, $accent);
-
-  // Include component styles with the given theme.
-  @include angular-material-theme($dark-theme);
-}
-
 body {
   font-family: Roboto, 'Helvetica Neue', sans-serif;
 

src/demo-app/demo-app/demo-app.ts

@@ -15,7 +15,7 @@ export class Home {}
   selector: 'demo-app',
   providers: [],
   templateUrl: 'demo-app.html',
-  styleUrls: ['demo-app.css'],
+  styleUrls: ['demo-app.css', 'demo-app-theme.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class DemoApp {

src/demo-app/index.html

@@ -8,7 +8,6 @@
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

tools/gulp/constants.ts

@@ -17,6 +17,10 @@ export const SASS_AUTOPREFIXER_OPTIONS = {
   cascade: false,
 };
 
+export const SASS_PREPROCESSOR_OPTIONS = {
+  includePaths: [DIST_ROOT]
+};
+
 export const HTML_MINIFIER_OPTIONS = {
   collapseWhitespace: true,
   removeComments: true,

tools/gulp/task_helpers.ts

@@ -3,7 +3,10 @@ import * as fs from 'fs';
 import * as gulp from 'gulp';
 import * as path from 'path';
 
-import {NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS} from './constants';
+import {
+  NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS,
+  SASS_PREPROCESSOR_OPTIONS
+} from './constants';
 
 
 /** Those imports lack typings. */
@@ -44,7 +47,7 @@ export function sassBuildTask(dest: string, root: string) {
   return () => {
     return gulp.src(_globify(root, '**/*.scss'))
       .pipe(gulpSourcemaps.init())
-      .pipe(gulpSass().on('error', gulpSass.logError))
+      .pipe(gulpSass(SASS_PREPROCESSOR_OPTIONS).on('error', gulpSass.logError))
       .pipe(gulpAutoprefixer(SASS_AUTOPREFIXER_OPTIONS))
       .pipe(gulpSourcemaps.write('.'))
       .pipe(gulp.dest(dest));

tools/gulp/tasks/aot.ts

@@ -12,7 +12,7 @@ task('aot:copy', [':build:devapp:scss', ':build:devapp:assets']);
  */
 task('aot:prepare', sequenceTask(
   'clean',
-  ['aot:copy', 'build:components:release', ':build:components:ngc'])
+  ['build:components:release', 'aot:copy', ':build:components:ngc'])
 );
 
 /** Builds the demo-app with the Angular compiler to verify that all components work. */

tools/gulp/tasks/development.ts

@@ -20,7 +20,7 @@ task(':watch:devapp', () => {
 
 task(':build:devapp:vendor', vendorTask());
 task(':build:devapp:ts', tsBuildTask(appDir));
-task(':build:devapp:scss', sassBuildTask(outDir, appDir));
+task(':build:devapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir));
 task(':build:devapp:assets', copyTask(appDir, outDir));
 task('build:devapp', buildAppTask('devapp'));