build: switch to dart-sass (#12370)

* Switches to dart-sass in order to be consistent with the Bazel output. That way we can identify potential issues with the SASS output (e.g. demo-app) before we at some point make the full-switch.
* Also speeds-up the project installs because libsass bindings are no longer needed (trade-off with compilation time though; but pretty minimal due to our amount of Sass files)

package.json

@@ -84,14 +84,14 @@
     "gulp-cli": "^1.3.0",
     "gulp-connect": "^5.0.0",
     "gulp-conventional-changelog": "^1.1.3",
+    "gulp-dart-sass": "^0.9.0",
     "gulp-dom": "^0.9.17",
     "gulp-flatten": "^0.3.1",
     "gulp-highlight-files": "^0.0.5",
     "gulp-htmlmin": "^3.0.0",
     "gulp-if": "^2.0.2",
     "gulp-markdown": "^1.2.0",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^3.1.0",
     "gulp-transform": "^2.0.0",
     "gulp-util": "^3.0.8",
     "hammerjs": "^2.0.8",
@@ -111,7 +111,6 @@
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
     "moment": "^2.18.1",
-    "node-sass": "^4.5.3",
     "parse5": "^5.0.0",
     "protractor": "^5.2.0",
     "request": "^2.83.0",
@@ -120,6 +119,7 @@
     "rollup-plugin-alias": "^1.4.0",
     "rollup-plugin-node-resolve": "^3.0.3",
     "run-sequence": "^1.2.2",
+    "sass": "^1.10.1",
     "scss-bundle": "^2.0.1-beta.7",
     "selenium-webdriver": "^3.6.0",
     "sorcery": "^0.10.0",

tools/package-tools/gulp/build-scss-task.ts

@@ -2,15 +2,15 @@ import {src, dest} from 'gulp';
 import {join} from 'path';
 
 // These imports lack of type definitions.
-const gulpSass = require('gulp-sass');
+const gulpDartSass = require('gulp-dart-sass');
 const gulpIf = require('gulp-if');
 const gulpCleanCss = require('gulp-clean-css');
 
 /** Create a gulp task that builds SCSS files. */
 export function buildScssTask(outputDir: string, sourceDir: string, minifyOutput = false) {
   return () => {
     return src(join(sourceDir, '**/*.scss'))
-      .pipe(gulpSass().on('error', gulpSass.logError))
+      .pipe(gulpDartSass.sync().on('error', gulpDartSass.logError))
       .pipe(gulpIf(minifyOutput, gulpCleanCss()))
       .pipe(dest(outputDir));
   };