Angular 15与Material 15主题primary color失效及导入错误求助

问题概述 #

升级至Angular 15和Material 15后，自定义theme.scss中的primary颜色失效，已将样式文件从css改为scss，尝试将主题导入styles.scss等方法均无效，同时出现SassError：无法找到要导入的样式表~@angular/material/theming。

错误原因 #

1. 路径解析规则变更：Angular 15及以上版本不再支持使用~符号解析node_modules中的依赖路径，原导入语法@import '~@angular/material/theming';已失效。
2. 样式冲突：angular.json中同时引入Material预构建主题和自定义主题，导致自定义主题样式被覆盖，primary颜色无法生效。

修复步骤 #

1. 修正theme.scss的导入路径 #

将theme.scss中的导入语句修改为：

@import '@angular/material/theming';

移除路径前的~符号，适配Angular 15的模块解析规则。

2. 调整angular.json的styles配置 #

删除预构建主题的引入，避免样式冲突。修改后的styles数组如下：

"styles": [
  "src/styles.scss",
  "src/theme.scss",
  "./node_modules/material-icons-font/material-icons-font.css"
],

3. 保留自定义主题的颜色定义 #

你的自定义调色板和主题生成代码完全兼容Material 15，无需修改，保持现有代码即可：

@include mat-core();

$md-elearningsupportportalwebapp-primary: (
    50 : #f2e2f0,
    100 : #dfb8d8,
    200 : #c988bf,
    300 : #b358a5,
    400 : #a33591,
    500 : #93117e,
    600 : #8b0f76,
    700 : #800c6b,
    800 : #760a61,
    900 : #64054e,
    A100 : #ff95e3,
    A200 : #ff62d5,
    A400 : #ff2fc8,
    A700 : #ff15c1,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);
$md-elearningsupportportalwebapp-accent: (
    50 : #e0eaf3,
    100 : #b3cbe2,
    200 : #80a8cf,
    300 : #4d85bb,
    400 : #266bad,
    500 : #00519e,
    600 : #004a96,
    700 : #00408c,
    800 : #003782,
    900 : #002770,
    A100 : #9fb8ff,
    A200 : #6c92ff,
    A400 : #396cff,
    A700 : #1f59ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);
$my-app-primary: mat-palette($md-elearningsupportportalwebapp-primary);
$my-app-accent:  mat-palette($md-elearningsupportportalwebapp-accent);
$my-app-warn:    mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);

4. 清理缓存并重启开发服务器 #

执行以下命令清理Angular缓存，避免旧配置残留：

ng cache clean

然后重启开发服务器：

ng serve

验证 #

重启服务器后，检查页面中使用primary颜色的组件（如按钮、工具栏）是否已应用自定义颜色，同时确认Sass导入错误是否消失。

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