Angular升级至v15后出现SassError：mat.core()参数传递错误

相关的Angular Material 15关键变更 #

• mat.core() mixin参数移除：v15彻底取消了该mixin的参数支持，v14中允许传入字体参数只是过渡方案，v15直接要求无参数调用。
• 字体配置方式调整：字体相关设置不再通过mat.core()传递，改为使用全局CSS变量或直接定义全局样式。

具体解决步骤 #

1. 定位并修改mat.core()调用
   查找项目中所有调用mat.core($xxx)的文件（通常是styles.scss或自定义Material主题文件），移除传入的参数：

   // 旧写法
   @include mat.core($xxx-regular-font);
   // 修改后
   @include mat.core();
   

2. 重新配置自定义字体
   如果需要保留自定义字体，通过以下方式设置：

   • 直接在全局样式中定义：

     body {
       font-family: '你的自定义字体', sans-serif;
     }
     

   • 或者使用Material的CSS变量覆盖默认字体：

     :root {
       --mat-body-font-family: '你的自定义字体', sans-serif;
       --mat-headline-font-family: '你的自定义字体', sans-serif;
     }
     

3. 清理编译缓存
   执行命令清除Angular CLI缓存，避免旧缓存导致的异常：

   ng cache clean
   

4. 验证修复
   重新启动或构建项目：

   ng serve
   

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