Angular scss variables are not resolved on first compilation only

After upgrading from angular 18 to angular 19, I have several build errors, on the first build only:

✘ [ERROR] Undefined variable.
╷
8 │ border-bottom: 10px solid $white-2;
src/app/components/icons/loading-icon/loading-icon.component.scss 17:9 root stylesheet [plugin angular-sass]


As soon as i touch a file and recompilation occurs, the errors are no longer there. It looks like on recompilation, the angular build system has cached the variables and can be resolved correctly.

How to tell angular to compile the styles with variables first?

This is my setup:

For example, loading-icon.componen.scss:

@use "/styles/main" as *;

.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid $white-2;
}

...


Folder structure:

project-root/
├── angular.json
├── styles/
│ ├── abstracts/
│ │ └── _variables.scss
│ ├── layout/
│ │ ├── _backgrounds.scss
│ │ ├── _borders_scss
│ │ ├── _containers.scss
│ │ └── _themes_scss
│ └── main.scss
└── src/
└── app/


main.scss:

@use './abstracts/variables' as *;
@use './layout/backgrounds' as *;
@use './layout/borders' as *;
@use './layout/containers' as *;
@use './layout/themes' as *;


_variables.scss:

...
$white-1: #ffffff;
$white-2: #f7f7f7;
...


Angular.json

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
..., //other options
"stylePreprocessorOptions": {
"includePaths": [
"."
]
}
...

Continue reading...