diff --git a/tools/gulp/tasks/development.ts b/tools/gulp/tasks/development.ts
index 1dd393f8f3c7..17e80bbddf3f 100644
--- a/tools/gulp/tasks/development.ts
+++ b/tools/gulp/tasks/development.ts
@@ -25,6 +25,11 @@ task(':watch:devapp', () => {
   watch(join(appDir, '**/*.ts'), [':build:devapp:ts', triggerLivereload]);
   watch(join(appDir, '**/*.scss'), [':build:devapp:scss', triggerLivereload]);
   watch(join(appDir, '**/*.html'), [':build:devapp:assets', triggerLivereload]);
+
+  // The themes for the demo-app are built by the demo-app using the SCSS mixins from Material.
+  // Therefore when the CSS files have been changed the SCSS mixins have been refreshed and
+  // copied over. Rebuilt the theme CSS using the updated SCSS mixins.
+  watch(join(DIST_MATERIAL, '**/*.css'), [':build:devapp:scss', triggerLivereload]);
 });
 
 /** Path to the demo-app tsconfig file. */
diff --git a/tools/gulp/util/task_helpers.ts b/tools/gulp/util/task_helpers.ts
index e88dffd4c173..2d75365a386d 100644
--- a/tools/gulp/util/task_helpers.ts
+++ b/tools/gulp/util/task_helpers.ts
@@ -3,6 +3,7 @@ import * as fs from 'fs';
 import * as gulp from 'gulp';
 import * as path from 'path';
 import {PROJECT_ROOT} from '../build-config';
+import {yellow} from 'chalk';
 
 /* Those imports lack typings. */
 const gulpClean = require('gulp-clean');
@@ -173,7 +174,8 @@ export function serverTask(packagePath: string, livereload = true) {
 
 /** Triggers a reload when livereload is enabled and a gulp-connect server is running. */
 export function triggerLivereload() {
-  gulp.src('dist').pipe(gulpConnect.reload());
+  console.log(yellow('Server: Changes were detected and a livereload was triggered.'));
+  return gulp.src('dist').pipe(gulpConnect.reload());
 }