Angular Material 17：如何在Style.scss中获取主题主色调？

问题场景 #

将Angular应用从16升级到17后，自定义主题custTheme.scss在组件中运行正常，但在style.scss中尝试获取主色调变体时失效，浏览器中显示未解析的mat-color(#616161, darker)代码。

自定义主题代码（custTheme.scss） #

@use '@angular/material' as mat;

@include mat.core();

$pp: mat.define-palette(mat.$indigo-palette);
$primary: mat.get-color-from-palette($pp);
$ap: mat.define-palette(mat.$pink-palette);
$accent: mat.get-color-from-palette($ap);
$wp: mat.define-palette(mat.$red-palette);
$warn: mat.get-color-from-palette($wp);

$theme: mat.define-light-theme((
 color: (
   primary: $pp,
   accent: $ap,
   warn: $wp,
 ),
 typography: mat.define-typography-config(),
));

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

style.scss中的失效代码 #

import '/custTheme';
background-color: mat-color($primary, darker);

原因分析 #

1. SCSS导入语法错误：使用了Dart Sass（Angular 17默认依赖）已逐步废弃的import语句，而非推荐的@use。Angular 17的构建工具对import的处理逻辑发生变化，导致变量与函数的关联解析异常。
2. 变量类型不匹配：$primary被定义为单一颜色值（mat.get-color-from-palette($pp)返回调色板的默认色值），但mat-color函数需要的是调色板对象（比如$pp），无法基于单一颜色生成darker这类色调变体。

解决办法 #

步骤1：修正自定义主题的变量暴露 #

修改custTheme.scss，保留调色板对象变量，并通过@forward导出供外部使用：

@use '@angular/material' as mat;

@include mat.core();

// 定义调色板对象（保留供外部使用）
$pp: mat.define-palette(mat.$indigo-palette);
$ap: mat.define-palette(mat.$pink-palette);
$wp: mat.define-palette(mat.$red-palette);

$theme: mat.define-light-theme((
 color: (
   primary: $pp,
   accent: $ap,
   warn: $wp,
 ),
 typography: mat.define-typography-config(),
));

// 导出调色板和主题变量，供外部通过命名空间访问
@forward '@angular/material' with (
  $primary: $pp,
  $accent: $ap,
  $warn: $wp,
  $theme: $theme
);

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

步骤2：修正style.scss的导入与变量引用 #

使用@use导入主题文件，并通过正确的命名空间引用调色板变量：

@use './custTheme' as mat;

background-color: mat.mat-color(mat.$primary, darker);

若不使用@forward，也可直接通过主题文件的命名空间访问调色板变量：

@use './custTheme' as theme;

// 直接使用主题中定义的$pp调色板对象
background-color: mat.mat-color(theme.$pp, darker);

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