Imported Sass/Scss files do not trigger a refresh when using ng serve in aot mode

[Kyhel]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

It doesn't seem to be a regression as I have the exact same problem with both angular 8 and 9

For the sake of helping figure out the problem, I created a fresh project, did some tests, then upgraded to angular 9 and did some tests again.

Description

Angular 8 :

When using "ng serve --aot", modifying an imported scss file does not trigger a refresh. It does however when using only "ng serve"

Angular 9

When using "ng serve" (aot is enabled by default when upgrading from 8 to 9), modifying an imported scss file does not trigger a refresh. If you disable aot in angular.json, then it works.

🔬 Minimal Reproduction

Angular 8

1. Create a new angular project : "ng new test-css". Chose no routing, and scss style format

2. Modify app.component.html to contain only that :

<div class="my-class">
	Text
</div>

3. Modify app.component.scss to contain only that :

@import '../custom.scss';

.my-class {
	color: $color;
}

4. Create a file named custom.scss in the src folder that contains this :

// $color: green;
$color: red;

5. run "ng serve --aot" => the text is red

6. comment the red color line and uncomment the green one, then save => nothing happens

7. save app.component.scss => a refresh is done but the color is still red, save again, the color is green.

🔥 Exception or Error

Not applicable.

🌍 Your Environment

Using visual studio code insiders 1.42.0

Angular CLI: 8.3.21
Node: 12.13.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.21
@angular-devkit/build-angular     0.803.21
@angular-devkit/build-optimizer   0.803.21
@angular-devkit/build-webpack     0.803.21
@angular-devkit/core              8.3.21
@angular-devkit/schematics        8.3.21
@angular/cli                      8.3.21
@ngtools/webpack                  8.3.21
@schematics/angular               8.3.21
@schematics/update                0.803.21
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2   0.803.21
rxjs                         6.4.0

Angular CLI: 9.0.0-rc.7
Node: 12.13.1
OS: win32 x64

Angular: 9.0.0-rc.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.7
@angular-devkit/build-angular     0.900.0-rc.7
@angular-devkit/build-optimizer   0.900.0-rc.7
@angular-devkit/build-webpack     0.900.0-rc.7
@angular-devkit/core              9.0.0-rc.7
@angular-devkit/schematics        9.0.0-rc.7
@ngtools/webpack                  9.0.0-rc.7
@schematics/angular               9.0.0-rc.7
@schematics/update                0.900.0-rc.7
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.41.2

Anything else relevant?

[filipesilva]

Heya, thanks for the super detailed repro!

In regards to this step:

7. save app.component.scss => a refresh is done but the color is still red, save again, the color is green.

I think we had a bug at some point that made it so you needed the double saves. But I don't see it anymore with a new project with rc.9.

I can definitely confirm that changes to src/custom.scss don't trigger a rebuild, but they should. Will dig into it.

[filipesilva]

Also of note, this only affects Ivy projects (at least as of rc.9).