如何在Angular自定义组件中使用Angular Material主题的颜色变量

报错原因 #

Angular 组件样式采用独立编译机制，全局样式文件 src/theme.scss 中定义的 $theme 变量和组件私有样式的编译上下文完全隔离，即使在 angular.json 中配置了全局样式引入顺序，也无法直接在组件样式中调用全局文件中定义的Sass变量。

解决方案 #

方案1：拆分主题变量为Sass Partial（通用场景推荐） #

将$theme变量的定义拆分到单独的Sass Partial文件（文件名以下划线开头，不会被单独编译），在全局主题文件和组件样式中分别引入该Partial即可共享变量。

1. 新建Partial文件 src/theme/_theme-variables.scss，存放你的主题定义代码：

@use '@angular/material' as mat;

// 替换为你从主题生成工具导出的自定义主题配置
$custom-primary: mat.define-palette(mat.$blue-palette, 500);
$custom-accent: mat.define-palette(mat.$orange-palette, A200);
$custom-warn: mat.define-palette(mat.$red-palette);

$theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn
  ),
  typography: mat.define-typography-config(),
  density: 0
));

2. 修改原src/theme.scss，只保留主题注入逻辑：

@use './theme/_theme-variables' as *;
// 注入Angular Material全局组件主题
@include mat.all-component-themes($theme);

3. 在自定义组件样式中引入该Partial即可直接使用$theme变量，示例footer.component.scss：

@use 'sass:map';
@use '@angular/material' as mat;
// 路径根据你的项目结构调整
@use '../theme/_theme-variables' as *;

$color-config: mat.get-color-config($theme);
$primary-palette: map.get($color-config, primary);

.footer {
  background: mat.get-color-from-palette($primary-palette, 800);
  color: mat.get-color-from-palette($primary-palette, default-contrast);
  padding: 1rem 2rem;
}

方案2：配置全局预处理器自动注入（多组件调用场景推荐） #

如果项目中有大量组件需要调用主题变量，可以通过Angular构建配置自动注入变量Partial，无需每个组件手动导入：

1. 按照方案1的步骤完成_theme-variables.scss的拆分
2. 修改angular.json配置，找到对应项目下的 projects > 你的项目名 > architect > build > options 节点，新增如下配置：

"stylePreprocessorOptions": {
  "includePaths": ["src/theme"],
  "additionalData": "@use 'theme-variables' as *;"
}

3. 配置完成后重启开发服务，所有组件的.scss文件可以直接使用$theme变量，无需手动导入Partial文件。

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