feat(@angular-devkit/build-angular): support dart-sass for SASS/SCSS

Author: clydin

packages/angular_devkit/build_angular/package.json

@@ -37,7 +37,7 @@
     "postcss-url": "^7.3.2",
     "raw-loader": "^0.5.1",
     "rxjs": "^6.0.0",
-    "sass-loader": "~6.0.7",
+    "sass-loader": "^7.1.0",
     "semver": "^5.5.0",
     "source-map-support": "^0.5.0",
     "source-map-loader": "^0.2.3",

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

@@ -200,13 +200,27 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     }
   }
 
+  let dartSass: {} | undefined;
+  try {
+    dartSass = require('sass');
+  } catch { }
+
+  let fiber: {} | undefined;
+  if (dartSass) {
+    try {
+      fiber = require('fibers');
+    } catch { }
+  }
+
   // set base rules to derive final rules from
   const baseRules: webpack.Rule[] = [
     { test: /\.css$/, use: [] },
     {
       test: /\.scss$|\.sass$/, use: [{
         loader: 'sass-loader',
         options: {
+          implementation: dartSass,
+          fiber,
           sourceMap: cssSourceMap,
           // bootstrap-sass requires a minimum precision of 8
           precision: 8,

tests/legacy-cli/e2e/tests/build/styles/dart-sass.ts

@@ -0,0 +1,52 @@
+import {
+  deleteFile,
+  expectFileToMatch,
+  replaceInFile,
+  writeMultipleFiles,
+} from '../../../utils/fs';
+import { ng, silentExec, silentNpm } from '../../../utils/process';
+import { updateJsonFile } from '../../../utils/project';
+import { expectToFail } from '../../../utils/utils';
+
+
+export default async function () {
+  if (process.platform.startsWith('win')) {
+    return;
+  }
+
+  await writeMultipleFiles({
+    'src/styles.scss': '@import \'./imported-styles.scss\';\nbody { background-color: blue; }',
+    'src/imported-styles.scss': 'p { background-color: red; }',
+    'src/app/app.component.scss': '.outer { .inner { background: #fff; } }',
+  });
+  await deleteFile('src/app/app.component.css');
+  await updateJsonFile('angular.json', workspaceJson => {
+    const appArchitect = workspaceJson.projects['test-project'].targets;
+    appArchitect.build.options.styles = [
+      { input: 'src/styles.scss' },
+    ];
+  });
+  await replaceInFile('src/app/app.component.ts', './app.component.css', './app.component.scss');
+
+  await silentExec('rm', '-rf', 'node_modules/node-sass');
+  await expectToFail(() => ng('build', '--extract-css', '--source-map'));
+
+  await silentNpm('install', 'sass');
+  await silentExec('rm', '-rf', 'node_modules/node-sass');
+  await ng('build', '--extract-css', '--source-map');
+
+  await expectFileToMatch('dist/test-project/styles.css', /body\s*{\s*background-color: blue;\s*}/);
+  await expectFileToMatch('dist/test-project/styles.css', /p\s*{\s*background-color: red;\s*}/);
+  await expectToFail(() => expectFileToMatch('dist/test-project/styles.css', '"mappings":""'));
+  await expectFileToMatch('dist/test-project/main.js', /.outer.*.inner.*background:\s*#[fF]+/);
+
+  await silentNpm('install', 'node-gyp');
+  await silentNpm('install', 'fibers');
+  await silentExec('rm', '-rf', 'node_modules/node-sass');
+  await ng('build', '--extract-css', '--source-map');
+
+  await expectFileToMatch('dist/test-project/styles.css', /body\s*{\s*background-color: blue;\s*}/);
+  await expectFileToMatch('dist/test-project/styles.css', /p\s*{\s*background-color: red;\s*}/);
+  await expectToFail(() => expectFileToMatch('dist/test-project/styles.css', '"mappings":""'));
+  await expectFileToMatch('dist/test-project/main.js', /.outer.*.inner.*background:\s*#[fF]+/);
+}

yarn.lock

@@ -6157,15 +6157,16 @@ sass-graph@^2.2.4:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
-sass-loader@~6.0.7:
-  version "6.0.7"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.7.tgz#dd2fdb3e7eeff4a53f35ba6ac408715488353d00"
+sass-loader@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.1.0.tgz#16fd5138cb8b424bf8a759528a1972d72aad069d"
   dependencies:
     clone-deep "^2.0.1"
     loader-utils "^1.0.1"
     lodash.tail "^4.1.1"
     neo-async "^2.5.0"
     pify "^3.0.0"
+    semver "^5.5.0"
 
 saucelabs@^1.5.0:
   version "1.5.0"