Пользовательская тема Angular не меняет типографику

Question

Я пишу интерфейс, используя Angular 15.2.0 и Angular Material 15.2.6 .

Я хочу определить тему, которая использует эти цветовые палитры:

• основной: индиго
• вторичный: зеленый
• предупреждение: красный

А также используйте Noto Sans вместо Roboto в качестве семейства шрифтов.

я написал этоtheme.scssфайл и импортировал его в свойstyles.scssфайл:

      @use '@angular/material' as mat;

@include mat.core();

// Define custom theme colors
$my-palette-primary: mat.define-palette(mat.$indigo-palette);
$my-palette-accent: mat.define-palette(mat.$green-palette);
$my-palette-warn: mat.define-palette(mat.$red-palette);

// Override default typography
$my-typography: mat.define-typography-config(
  $font-family: 'Noto Sans, sans-serif',
);

// Create custom theme using the defined colors
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-palette-primary,
    accent: $my-palette-accent,
    warn: $my-palette-warn,
  ),
  typography: $my-typography,
));

// Include custom theme in app
@include mat.all-component-themes($my-theme);

Я также изменил ссылку на шрифт вindex.htmlсоответственно:

      <link 
    href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500&display=swap"
    rel="stylesheet">

Однако, согласно инспектору браузера, класс.mat-typographyвсе еще исходит отindigo-pink.scssи устанавливает правило CSSfont-family: Roboto, sans-serif. Поскольку этот шрифт больше не загружается, он возвращается к Arial.

Какую ошибку я здесь допустил?

Answer 1

Вероятно, у вас есть импортindigo-pink.scssгде-то. Либо в :

• один из ваших scss-файлов
• твойangular.jsonконфигурация