Angular 17.0.10中Angular Material主题样式导入失败求助

架构老林

2026-7-1

Angular 17 自定义Material主题导入报错解决方案

问题原因

Angular 17 默认使用 ESBuild 作为打包工具，不再支持旧版 Webpack 中的 ~ 路径别名语法，因此原代码中带 ~ 的导入语句无法被正确解析。

修复步骤

修改导入语句
将 styles.scss 中的：
```
@import '~@angular/material/theming';
```
替换为：
```
@import '@angular/material/theming';
```
直接移除前缀 ~，ESBuild 会自动从 node_modules 中解析 @angular/material 包的文件。
重启开发服务
执行 ng serve 之前，先停止当前服务并重启，避免缓存导致的问题。

修改后的完整代码示例

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

@import '@angular/material/theming';

@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
  )
));

@include angular-material-theme($candy-app-theme);


// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    warn: $dark-warn,
  )
));

.unicorn-dark-theme {
  @include angular-material-color($dark-theme);
}