angular-material - 我应该如何应用自定义的角度 Material 主题？

Question

我在尝试设置自定义角度 Material 主题时遇到问题。我正在尝试遵循docs(https://material.angular.io/guide/theming)中给出的基本示例，但在应用启动期间始终遇到错误:“SassError:缺少参数$ accent”。
这似乎是试图突出显示mat-light-theme()调用，但是据我所知，我正在遵循docs中给出的示例文件。
这看起来是否正确...(我希望可以确定主题文件是正确的，这样我就可以开始追踪在其他地方引入的问题了)？

    @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);