Angular 19升级后首次编译SCSS变量未解析的问题求助

各位好，我把项目从Angular 18升级到19后碰到了一个特别奇怪的构建问题：首次执行构建命令时会弹出SCSS变量未定义的错误，但只要我修改任意一个文件触发重新编译，这些错误就自动消失了。看起来像是重新编译时Angular构建系统缓存了变量，所以能正确解析，但首次构建时却找不到这些变量的定义。

具体的错误信息如下：

✘ [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]

补充下后续测试的发现：如果我修改的是某个用到了SCSS变量的文件，重新构建还是会失败；但如果改的是不涉及SCSS变量的文件，重新编译就能顺利通过。

以下是我的项目配置和代码细节：

组件SCSS文件示例（loading-icon.component.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;
}
// 其他样式代码...

项目文件夹结构 #

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": {
      // 其他配置项...
      "stylePreprocessorOptions": {
        "includePaths": [
          "."
        ]
      }
    }
  }
}

请问各位有没有遇到过类似的问题？我该怎么调整配置，才能让Angular在首次编译时就正确处理好这些样式变量，避免出现首次构建失败的情况？

内容来源于stack exchange