Angular v15主题配置报错：无$title/$input参数及map类型错误

我严格按照Angular官方主题文档配置，却遇到以下报错：

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: No arguments named $title or $input.
    ┌──> src\sass\core.scss
44  │   $typography: mat.define-typography-config(
    │ ┌──────────────^
45  │ │   $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
46  │ │   $title: mat-typography-level(20px, 32px, 600),
47  │ │   $body-2: mat-typography-level(14px, 24px, 600),
48  │ │   $button: mat-typography-level(14px, 14px, 600),
49  │ │   $input: mat-typography-level(16px, 1.125, 400),
50  │ │ );
    │ └─^ invocation

我的SCSS代码如下：

@use '@angular/material' as mat;
@import '@angular/material/theming';

@include mat-core();

$app-primary: mat.define-palette(mat.$light-blue-palette, 700, 200, 400);
$app-accent: mat.define-palette(mat.$light-blue-palette, A700, A200, A400);
$app-warn: mat.define-palette(mat.$red-palette);

$app-typography: mat.define-typography-config(
  $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
);

$app-theme: mat.define-light-theme(
  (
    color: (
      $app-primary,
      $app-accent,
      $app-warn,
    ),
    typography: $app-typography,
  )
);

@include mat.all-component-themes($app-theme);

我是否遗漏了什么？

编辑 #

根据建议，我将mat-core()修改为mat.core()，但又出现了新的报错：

./src/sass/main.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $map: (50: #e1f5fe, 100: #b3e5fc, 200: #81d4fa, 300: #4fc3f7, 
// ...
, "contrast-contrast": null) is not a map.
    ╷
197 │     $primary: map.get($color-settings, primary);
    │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\@angular\material\core\theming\_theming.scss 197:15  define-light-theme()
  src\sass\core.scss 14:13                                          @import
  src\sass\main.scss 10:9                                           root stylesheet

我仍然不知道问题出在哪。

解决方案 #

问题1：$title/$input参数不存在

Angular Material v14+ 中，define-typography-config的参数结构已更新，不再直接支持$title、$input这类单个级别参数，需通过$levels传入级别映射的map：

$app-typography: mat.define-typography-config(
  $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
  $levels: (
    title: mat.define-typography-level(20px, 32px, 600),
    body-2: mat.define-typography-level(14px, 24px, 600),
    button: mat.define-typography-level(14px, 14px, 600),
    input: mat.define-typography-level(16px, 1.125, 400),
  )
);

问题2：define-light-theme颜色配置格式错误

修改mat-core()为mat.core()后的报错，是因为颜色参数未指定键名。正确格式需用primary、accent、warn作为键：

$app-theme: mat.define-light-theme(
  (
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    ),
    typography: $app-typography,
  )
);

额外注意：避免混合使用@use和@import

同时使用@use '@angular/material' as mat;和@import '@angular/material/theming';会导致冲突，需移除@import语句，所有工具函数统一用mat.前缀调用。

修正后的完整SCSS代码：

@use '@angular/material' as mat;

@include mat.core();

$app-primary: mat.define-palette(mat.$light-blue-palette, 700, 200, 400);
$app-accent: mat.define-palette(mat.$light-blue-palette, A700, A200, A400);
$app-warn: mat.define-palette(mat.$red-palette);

$app-typography: mat.define-typography-config(
  $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
  $levels: (
    title: mat.define-typography-level(20px, 32px, 600),
    body-2: mat.define-typography-level(14px, 24px, 600),
    button: mat.define-typography-level(14px, 14px, 600),
    input: mat.define-typography-level(16px, 1.125, 400),
  )
);

$app-theme: mat.define-light-theme(
  (
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    ),
    typography: $app-typography,
  )
);

@include mat.all-component-themes($app-theme);

内容的提问来源于stack exchange，提问作者Raphaël Balet