htmlcssangularsass

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?

Edit: when i touch a scss file that uses a variable the build still fails, but only for that file. When changing a file without a scss variable, compilation succeeds.

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": [
                "."
              ]
           }
        ...
Solution

  • Try using the @forward which:

    After some digging, the @forward rule is quite interesting. What it does is let your members, such as variables, of a forwarded stylesheet be accessible outside of the @use stylesheet that imports it.

    The New SASS Module System: Out with @import, In with @use

    So we use @forward for all the files where SCSS properties needs to be exposed.

    main.scss:

    @forward './abstracts/variables';
@forward './layout/backgrounds';
@forward './layout/borders';
@forward './layout/containers';
@forward './layout/themes';

    Then using this file, we use @use with a namespace and refer for this SCSS variable.

    loading-icon.component.scss:

    @use "/styles/main" as main;

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

    Stackblitz Demo