Angular 7 CLI generated project throws "ERROR in multi ./src/styles.sass"

Question

I have generated a new Angular project using ng new dragonfly with the following parameters:

Angular v7.2
Angular CLI v.7.3
NPM 6.7.0
Windows 10

I've selected to include routing, and SCSS.

When I try to fire up the project using npm start or ng serve, toward the end of the compilation the following error gets thrown:

ERROR in multi ./src/styles.sass
Module not found: Error: Can't resolve 
'C:\Users\S\angular\dragonfly\src\styles.sass' in 
'C:\Users\S\angular\dragonfly'

i ｢wdm｣: Failed to compile.

The angular.json file lists scss under project schematics:

      "schematics": {
        "@schematics/angular:component": {
          "style": "sass"
        }
      },

The build fails in Windows CLI, and Bash CLI on the same machine in the exact same way. The file styles.scss was created, and contains only a default comment.

Are my configs somewhere messed up, or, perhaps this is a bug to report? Any insight would be great. I did test generating the project using CSS instead of SCSS, and that one compiles and runs without problems.

Update: My NodeJS installation was outdated, at version 8.9.1. I've now updated it and am running 10.15.1. The results are identical.

Answer 1

UPDATE: Angular 8 is out. Rather than applying the fix outlined below, consider upgrading to v8.

A bug indeed! The official issue is at https://github.com/angular/angular-cli/issues/13550 while https://github.com/angular/angular-cli/issues/13551 gives a description on how to get around it. In short, modify angular.json's

"styles": [
    "src/styles.sass"
],

replacing styles.sass with styles.scss.

The issue is filed officially for Angular 7.3. After some digging around my config files, I am noticing a lot of Angular 7.3 versions in my packager-lock.json. @angular/core is at 7.2.3, but @angular-devkit/core is added as 7.3.0.