升级Angular 15后Material自定义主题出现Sass参数错误

问题背景 #

从Material Theme Generator生成的自定义主题代码原本运行正常，升级到Angular 15后出现参数传递错误。

原主题代码 #

@use '@angular/material' as mat;

@import 'https://fonts.googleapis.com/css?family=Material+Icons';
@import url('https://fonts.googleapis.com/css?family=Amiri:300,400,500');

$fontConfig: (
  display-4: mat.define-typography-level(52px, 56px, 300, 'Amiri', -0.0288em),
  display-3: mat.define-typography-level(38px, 38px, 400, 'Amiri', -0.0132em),
  display-2: mat.define-typography-level(32px, 36px, 400, 'Amiri', 0em),
  display-1: mat.define-typography-level(28px, 32px, 400, 'Amiri', 0.0089em),
  headline: mat.define-typography-level(24px, 32px, 400, 'Amiri', 0em),
  title: mat.define-typography-level(20px, 32px, 500, 'Amiri', 0.0075em),
  subheading-2: mat.define-typography-level(16px, 28px, 400, 'Amiri', 0.0094em),
  subheading-1: mat.define-typography-level(15px, 24px, 500, 'Amiri', 0.0067em),
  body-2: mat.define-typography-level(14px, 24px, 500, 'Amiri', 0.0179em),
  body-1: mat.define-typography-level(14px, 20px, 400, 'Amiri', 0.0179em),
  button: mat.define-typography-level(14px, 14px, 500, 'Amiri', 0.0893em),
  caption: mat.define-typography-level(12px, 20px, 400, 'Amiri', 0.0333em),
  input: mat.define-typography-level(inherit, 1.125, 400, 'Amiri', 1.5px),
);
@include mat.core($fontConfig);

升级后错误信息 #

./apps/my-project/src/theme/custom.theme.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Only 0 arguments allowed, but 1 was passed.
  ┌──> apps\my-project\src\theme\custom.theme.scss
33│ @include mat.core($fontConfig);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
  ╵
  ┌──> node_modules\@angular\material\core\_core.scss
8 │ @mixin core() {
  │        ━━━━━━ declaration
  ╵
  apps\my-project\src\theme\custom.theme.scss 33:1  core()
  apps\my-project\src\theme\custom.theme.scss 33:1  root stylesheet

./apps/my-project/src/theme/custom.theme.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: Only 0 arguments allowed, but 1 was passed.
  ┌──> apps\my-project\src\theme\custom.theme.scss
33│ @include mat.core($fontConfig);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
  ╵
  ┌──> node_modules\@angular\material\core\_core.scss
8 │ @mixin core() {
  │        ━━━━━━ declaration
  ╵
  apps\my-project\src\theme\custom.theme.scss 33:1  core()
  apps\my-project\src\theme\custom.theme.scss 33:1  root stylesheet

解决方案 #

Angular 15重构了Material的SCSS API，mat.core()混合器不再接受参数，需将排版配置单独分离设置：

1. 调用无参数的mat.core()初始化核心样式
2. 使用mat.all-component-typography()混合器应用自定义排版配置

修改后的完整代码：

@use '@angular/material' as mat;

@import 'https://fonts.googleapis.com/css?family=Material+Icons';
@import url('https://fonts.googleapis.com/css?family=Amiri:300,400,500');

$fontConfig: (
  display-4: mat.define-typography-level(52px, 56px, 300, 'Amiri', -0.0288em),
  display-3: mat.define-typography-level(38px, 38px, 400, 'Amiri', -0.0132em),
  display-2: mat.define-typography-level(32px, 36px, 400, 'Amiri', 0em),
  display-1: mat.define-typography-level(28px, 32px, 400, 'Amiri', 0.0089em),
  headline: mat.define-typography-level(24px, 32px, 400, 'Amiri', 0em),
  title: mat.define-typography-level(20px, 32px, 500, 'Amiri', 0.0075em),
  subheading-2: mat.define-typography-level(16px, 28px, 400, 'Amiri', 0.0094em),
  subheading-1: mat.define-typography-level(15px, 24px, 500, 'Amiri', 0.0067em),
  body-2: mat.define-typography-level(14px, 24px, 500, 'Amiri', 0.0179em),
  body-1: mat.define-typography-level(14px, 20px, 400, 'Amiri', 0.0179em),
  button: mat.define-typography-level(14px, 14px, 500, 'Amiri', 0.0893em),
  caption: mat.define-typography-level(12px, 20px, 400, 'Amiri', 0.0333em),
  input: mat.define-typography-level(inherit, 1.125, 400, 'Amiri', 1.5px),
);
// 初始化核心样式（无参数）
@include mat.core();
// 应用自定义排版配置到所有组件
@include mat.all-component-typography($fontConfig);

原理说明 #

Angular 15将Material的核心样式初始化与排版配置分离，core()仅负责基础样式初始化，排版配置则通过专门的all-component-typography()混合器统一设置，让样式结构更模块化、职责更清晰。

内容的提问来源于stack exchange，提问作者Owen Kelvin