Angular 16升级至17.3.1后Sass编译错误求助

错误详情 #

升级项目从Angular 16.2.14到17.3.1后，编译时出现以下错误：

./src/assets/styles/customMaterialTheme.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
"headline1-font-family already has a link"
   ╷
48 │       $unused: keys.add-link(keys.combine($style, $base-key), $base-key);
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  @material\typography\_typography.scss 48:16                             set-styles-()
  @material\typography\_typography.scss 128:10                            @use
  node_modules\@material\floating-label\_floating-label-theme.scss 32:1   @forward
  @material\floating-label\_variables.scss 23:1                           @use
  node_modules\@material\textfield\_variables.scss 26:1                   @forward
  @material\_index.scss 1:1                                               @use
  node_modules\@angular\material\core\tokens\m2\mat\_form-field.scss 3:1  @use
  node_modules\@angular\material\core\tokens\m2\_index.scss 20:1          @forward
  @angular\_index.scss 17:1                                               @use
  src\assets\styles\customMaterialTheme.scss 1:1                          root stylesheet

./src/assets/styles/customMaterialTheme.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
"headline1-font-family already has a link"
   ╷
48 │       $unused: keys.add-link(keys.combine($style, $base-key), $base-key);
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  @material\typography\_typography.scss 48:16                             set-styles-()
  @material\typography\_typography.scss 128:10                            @use
  node_modules\@material\floating-label\_floating-label-theme.scss 32:1   @forward
  @material\floating-label\_variables.scss 23:1                           @use
  node_modules\@material\textfield\_variables.scss 26:1                   @forward
  @material\_index.scss 1:1                                               @use
  node_modules\@angular\material\core\tokens\m2\mat\_form-field.scss 3:1  @use
  node_modules\@angular\material\core\tokens\m2\_index.scss 20:1          @forward
  @angular\_index.scss 17:1                                               @use
  src\assets\styles\customMaterialTheme.scss 1:1                          root stylesheet

自定义主题代码 #

当前使用的customMaterialTheme.scss代码如下：

@use '@angular/material' as mat;
@include mat.core();

$my-primary: mat.define-palette(mat.$deep-purple-palette);
$my-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
//$my-warn: mat.define-palette(mat.$amber-palette, 900);
$typography: mat.define-typography-config($font-family: 'Roboto');

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

// Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($my-theme);

// Emit styles for MatButton based on $my-theme
@include mat.button-theme($my-theme);

// Theme for all material components
@include mat.all-component-themes($my-theme);
@include mat.all-component-typographies($typography);   

:root {
    --primary-color: #{mat.get-color-from-palette($my-primary, default)};
    --primary-color-light: #{mat.get-color-from-palette($my-primary, 100)};
    --primary-color-text: #{mat.get-color-from-palette($my-primary, default-contrast)};
    --accent-color: #{mat.get-color-from-palette($my-accent, default)};
    --accent-color-light: #{mat.get-color-from-palette($my-accent, A100)};
    --accent-color-text: #{mat.get-color-from-palette($my-accent, default-contrast)};
}

已尝试的无效方案 #

• 回退到Angular 16版本后项目可正常运行
• 使用Material 3排版配置无变化
• 未找到同类升级问题的解决方案
• 删除主题自定义代码可编译但出现严重显示异常

问题原因与解决方法 #

原因 #

Angular Material 17中，mat.all-component-themes($my-theme)已经自动注入了主题中配置的排版样式（因为你已经将$typography传入define-light-theme）。此时再单独调用mat.all-component-typographies($typography)会导致重复注册同一个排版键（如headline1-font-family），触发Sass内部的重复链接错误。

解决步骤 #

1. 移除customMaterialTheme.scss中的这一行：

   @include mat.all-component-typographies($typography);
   

2. 确认$typography已正确包含在$my-theme的配置中（你的代码中已经完成这一步）
3. 重新执行编译命令

额外说明 #

如果需要为特定组件单独覆盖排版样式，不要全局调用all-component-typographies，而是针对单个组件使用对应的排版混入，例如：

@include mat.button-typography($typography);

但需注意：如果该组件的样式已经通过all-component-themes注入过，重复调用仍会引发相同错误，仅在未通过主题注入时使用此方式。

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