Angular 14 Angular Material Themes - 在 Visual Studio 中“找不到要导入的样式表”，但使用“ng build”构建

Question

我有一个 Angular 14 应用程序，它是作为 Visual Studio 中现有 ASP.NET MVC Core 应用程序的一部分构建的。 Angular项目是现有MVC应用程序中的一个文件夹，所以我的项目看起来有点像这样：

.
├── Program.cs
├── Startup.cs
├── Controllers
├── Views
├── ...
├── Angular
│   ├── node_modules
│   ├── src
│   ├── content
│   │   └── styles
│   │       ├── styles.scss
│   │       └── _palette.scss
│   ├── angular.json
│   ├── tsconfig.json
│   └── package.json

在添加角度材料主题之前，这一切都运作良好。 在 styles.scss 中添加如下主题：

@use '@angular/material' as mat;

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '@angular/material/_theming';
@import '_palette.scss'; 

$Angular-primary: mat-palette($palette-primary, 500);
$Angular-accent: mat-palette($palette-secondary, 500);

$Angular-theme: mat-light-theme($Angular-primary, $Angular-accent);

@include angular-material-theme($Angular-theme);

这会引发Error: Can't find stylesheet to import. Visual Studio 中@angular/material组件的错误。 很简单，直接用@use '../../node_modules/@angular/material' as mat; , 并为 _theming 样式表使用相同的@import '../../node_modules/@angular/material/_theming'; 但是，如果引用的样式表会引发另一个错误：

Error       Error: Can't find stylesheet to import.
  ╷
1 │ @use '@angular/cdk';
  │ ^^^^^^^^^^^^^^^^^^^
  ╵
  Angular\node_modules\@angular\material\core\style\_menu-common.scss 1:1  @forward
  Angular\node_modules\@angular\material\_index.scss 33:1                  @use
  Angular\Content\styles\styles.scss 1:1                                  root stylesheet

Angular/cdk 在我的包引用中并且存在于 node_modules 中。 似乎任何引用@angular/*的样式表都无法正确解析，甚至在 node_modules 文件夹中引用的样式表也是如此。 我尝试将includePaths配置添加到我的 angular.json 中，但没有任何效果（我尝试过 node_modules、./node-modules、./node-modules/@angular）：

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "../wwwroot/Angular",
        "index": "./src/index.html",
        "main": "./src/main.ts",
        "polyfills": "./src/polyfills.ts",
        "tsConfig": "./src/tsconfig.app.json",
        "styles": [
          "./Content/styles/styles.scss"
        ],
        "stylePreprocessorOptions": {
          "includePaths": [
            "./node-modules"
          ]
        }
        ...

typescript 中包含的所有节点包（包括@angular/material ）都正确构建，但不是 .scss 文件中引用的那些。

有趣的是，如果我从 /Angular 文件夹调用ng serve ， ng serve会正确构建应用程序并且样式（包括我的自定义主题和调色板）按预期工作。 貌似Visual Studio不能解析scss文件的路径，但是直接调用ng build可以。 Visual Studio 和 ng build 都适用于打字稿参考。

在 ts.config 我可以添加路径别名，以便在 .ts 文件中使用：

"paths": {
  "@components/*": [ "./app/components/*" ],
  "@models": [ "./app/models/index.ts" ],
  ...

我实际上需要类似的东西来让样式表引用在 node_modules 中找到的样式。 我认为includePaths in angular.json可能是等价的，但它似乎没有做任何事情。 有什么建议么？