From c285d15760e5e825ffcce859c96364f3d24c2371 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sat, 18 Feb 2017 13:01:02 +0100 Subject: [PATCH] Address comments --- src/demo-app/demo-app/demo-app-theme.scss | 16 ++++++++++++++++ src/demo-app/demo-app/demo-app.scss | 16 ---------------- src/demo-app/demo-app/demo-app.ts | 2 +- src/demo-app/index.html | 1 - tools/gulp/constants.ts | 4 ++++ tools/gulp/task_helpers.ts | 7 +++++-- tools/gulp/tasks/aot.ts | 2 +- tools/gulp/tasks/development.ts | 2 +- 8 files changed, 28 insertions(+), 22 deletions(-) create mode 100644 src/demo-app/demo-app/demo-app-theme.scss diff --git a/src/demo-app/demo-app/demo-app-theme.scss b/src/demo-app/demo-app/demo-app-theme.scss new file mode 100644 index 000000000000..335c4fc30f8f --- /dev/null +++ b/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); +} diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss index d1e3726f1a81..df853dd1a4f7 100644 --- a/src/demo-app/demo-app/demo-app.scss +++ b/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; diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index d4d8b376e2e6..fefd419db8dc 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/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 { diff --git a/src/demo-app/index.html b/src/demo-app/index.html index 3099472c8633..574095f01c79 100644 --- a/src/demo-app/index.html +++ b/src/demo-app/index.html @@ -8,7 +8,6 @@ - diff --git a/tools/gulp/constants.ts b/tools/gulp/constants.ts index b2811415da31..925a17e9a033 100644 --- a/tools/gulp/constants.ts +++ b/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, diff --git a/tools/gulp/task_helpers.ts b/tools/gulp/task_helpers.ts index ffeffc59af19..7df1dac3f93e 100644 --- a/tools/gulp/task_helpers.ts +++ b/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)); diff --git a/tools/gulp/tasks/aot.ts b/tools/gulp/tasks/aot.ts index 073535532435..334524eac4b8 100644 --- a/tools/gulp/tasks/aot.ts +++ b/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. */ diff --git a/tools/gulp/tasks/development.ts b/tools/gulp/tasks/development.ts index 846d4eecd257..2da68e739b4a 100644 --- a/tools/gulp/tasks/development.ts +++ b/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'));