Angular Material主题开发遇SassError：mat命名空间未定义

问题原因 #

Sass的@use是文件级作用域，你在_theme.scss里用@use "@angular/material" as mat导入的模块，仅在该文件内部生效，不会通过@import传递到styles.scss中。而styles.scss直接调用mat.xxx时，当前文件并未导入mat模块，因此触发未定义错误。

解决方案 #

方案一：在styles.scss中直接导入mat模块

修改styles.scss，添加@use "@angular/material" as mat;，确保当前文件能访问mat命名空间：

// styles.scss
@use "@angular/material" as mat;
@import "theme";

@include mat.typography-hierarchy($typography);
@include mat.all-component-themes($theme);
.dark-theme {
  @include mat.all-component-themes($dark-theme);
}

方案二：封装主题变量并统一导出（推荐）

将主题配置集中在_theme.scss，导出所需变量，避免重复导入模块：

1. 修改_theme.scss：

// _theme.scss
@use "@angular/material" as mat;
@include mat.core();

// 定义调色板
$primary-palette: (
  50: #f6e0e6,
  100: #e9b3c2,
  200: #db8099,
  // 补充剩余色调
);
$primary: mat.define-palette($primary-palette);
$accent: mat.define-palette(mat.$pink-palette);
$warn: mat.define-palette(mat.$red-palette);

// 定义亮色/暗色主题及排版
$theme: mat.define-light-theme((
  color: (primary: $primary, accent: $accent, warn: $warn)
));
$dark-theme: mat.define-dark-theme((
  color: (primary: $primary, accent: $accent, warn: $warn)
));
$typography: mat.define-typography-config();

// 导出变量供外部使用
@export $theme;
@export $dark-theme;
@export $typography;

2. 修改styles.scss：

// styles.scss
@use "@angular/material" as mat;
@use "theme" as theme;

@include mat.typography-hierarchy(theme.$typography);
@include mat.all-component-themes(theme.$theme);
.dark-theme {
  @include mat.all-component-themes(theme.$dark-theme);
}

注意事项 #

• 优先使用Sass的@use替代@import，后者已被标记为废弃，@use具备更清晰的作用域管理。
• 确保Angular Material版本与项目使用的Sass版本兼容，避免语法差异导致的异常。

内容的提问来源于stack exchange，提问作者Fabian Röhrle