我应该如何应用自定义角度材质主题？

Question

我在尝试设置自定义 Angular Material 主题时遇到问题。我正在尝试遵循文档（https://material.angular.io/guide/theming）中给出的基本示例，但在应用程序启动期间不断遇到错误：“SassError：缺少参数 $accent”。

这似乎是试图突出 mat-light-theme() 调用，但据我所知，我正在遵循文档中给出的示例文件。

这看起来是否正确......（我希望确信主题文件是正确的，以便我可以开始追踪其他地方引入的问题）？

    @import '~@angular/material/theming';
    @import 'mixins/definitions'; // just another scss file

    // Include the common styles for Angular Material. We include this here so that you only
    // have to load a single css file for Angular Material in your app.
    // Be sure that you only ever include this mixin once!
    @include mat-core();

    $my-app-primary: mat-palette($mat-indigo); 
    $my-app-accent:  mat-palette($mat-pink, A200, A100, A400);
    $my-app-warn:  mat-palette($mat-red, A200, A100, A400);

    // The warn palette is optional (defaults to red).
    //$candy-app-warn:    mat-palette($mat-red);

    // Create the theme object. A theme consists of configurations for individual
    // theming systems such as `color` or `typography`.
    //$candy-app-theme: mat-light-theme((
    $my-app-theme: mat-light-theme((
        color: (
                primary: $my-app-primary,
                accent: $my-app-accent,
                warn: $my-app-warn
        )
    ));

   @include angular-material-theme($my-app-theme);
   @include mat-core-theme($my-app-theme);
   @include mat-checkbox-theme($my-app-theme);

一些可能与我的 package.json 相关的位：

"dependencies": {
...
    "@angular/animations": "~9.1.9",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/material": "^9.2.4",

...
}

"devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "~9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    ...
}

Answer 1

工作示例，请注意“mat-light-theme”行：

@import '~@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mat-indigo);
$app-accent:  mat-palette($mat-amber, A200, A100, A400);
$app-warn:    mat-palette($mat-red);
$app-theme:   mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);