feat(@angular-devkit/build-angular): use sass instead of node-sass

BREAKING CHANGE: we no longer use `node-sass` by default, instead we use `sass` (dart-sass).

While in most cases this should not have an impact the generated code, dart sass has some differences from Ruby Sass. See https://github.com/sass/dart-sass#behavioral-differences-from-ruby-sass for more details

If you wish to use `node-sass` instead of `sass` you need to install node-sass as a dev dependency.

npm users
```
npm install node-sass --save-dev
```

yarn users
```
yarn add node-sass --dev
```

**Note:** for larger Sass projects to avoid this performance hit you might want to install `fibers`. See: https://www.npmjs.com/package/fibers

Ref: TOOL-748

Author: alan-agius4

packages/angular_devkit/build_angular/package.json

@@ -34,6 +34,7 @@
     "postcss-loader": "3.0.0",
     "raw-loader": "1.0.0",
     "rxjs": "6.4.0",
+    "sass": "1.17.3",
     "sass-loader": "7.1.0",
     "semver": "5.6.0",
     "source-map-support": "0.5.11",
@@ -52,9 +53,6 @@
     "webpack-sources": "1.3.0",
     "webpack-subresource-integrity": "1.1.0-rc.6"
   },
-  "optionalDependencies": {
-    "node-sass": "4.11.0"
-  },
   "devDependencies": {
     "@angular/animations": "^8.0.0-beta.9",
     "@angular/cdk": "^7.3.4",

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

@@ -120,14 +120,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     }
   }
 
-  let dartSass: {} | undefined;
+  let sassImplementation: {} | undefined;
+  let fiber: {} | undefined;
   try {
     // tslint:disable-next-line:no-implicit-dependencies
-    dartSass = require('sass');
-  } catch { }
+    sassImplementation = require('node-sass');
+  } catch {
+    sassImplementation = require('sass');
 
-  let fiber: {} | undefined;
-  if (dartSass) {
     try {
       // tslint:disable-next-line:no-implicit-dependencies
       fiber = require('fibers');
@@ -142,7 +142,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       use: [{
         loader: 'sass-loader',
         options: {
-          implementation: dartSass,
+          implementation: sassImplementation,
           fiber,
           sourceMap: cssSourceMap,
           // bootstrap-sass requires a minimum precision of 8

yarn.lock

@@ -6367,31 +6367,6 @@ node-sass-tilde-importer@^1.0.0:
   dependencies:
     find-parent-dir "^0.3.0"
 
-node-sass@4.11.0:
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.11.0.tgz#183faec398e9cbe93ba43362e2768ca988a6369a"
-  integrity sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==
-  dependencies:
-    async-foreach "^0.1.3"
-    chalk "^1.1.1"
-    cross-spawn "^3.0.0"
-    gaze "^1.0.0"
-    get-stdin "^4.0.1"
-    glob "^7.0.3"
-    in-publish "^2.0.0"
-    lodash.assign "^4.2.0"
-    lodash.clonedeep "^4.3.2"
-    lodash.mergewith "^4.6.0"
-    meow "^3.7.0"
-    mkdirp "^0.5.1"
-    nan "^2.10.0"
-    node-gyp "^3.8.0"
-    npmlog "^4.0.0"
-    request "^2.88.0"
-    sass-graph "^2.2.4"
-    stdout-stream "^1.4.0"
-    "true-case-path" "^1.0.2"
-
 node-sass@^4.9.3:
   version "4.9.4"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.9.4.tgz#349bd7f1c89422ffe7e1e4b60f2055a69fbc5512"
@@ -8088,6 +8063,13 @@ sass-loader@7.1.0:
     pify "^3.0.0"
     semver "^5.5.0"
 
+sass@1.17.3:
+  version "1.17.3"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.17.3.tgz#19f9164cf8653b9fca670a64e53285272c96d192"
+  integrity sha512-S4vJawbrNUxJUBiHLXPYUKZCoO6cvq3/3ZFBV66a+PafTxcDEFJB+FHLDFl0P+rUfha/703ajEXMuGTYhJESkQ==
+  dependencies:
+    chokidar "^2.0.0"
+
 sauce-connect-launcher@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sauce-connect-launcher/-/sauce-connect-launcher-1.2.4.tgz#8d38f85242a9fbede1b2303b559f7e20c5609a1c"