Angular v15, no arguments named $title or $input

Question

I'm doing the following and trying to follow as good as possible the angular documentation but I'm facing the following error

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: No arguments named $title or $input.
    ┌──> src\sass\core.scss
44  │   $typography: mat.define-typography-config(
    │ ┌──────────────^
45  │ │   $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
46  │ │   $title: mat-typography-level(20px, 32px, 600),
47  │ │   $body-2: mat-typography-level(14px, 24px, 600),
48  │ │   $button: mat-typography-level(14px, 14px, 600),
49  │ │   $input: mat-typography-level(16px, 1.125, 400),
50  │ │ );
    │ └─^ invocation

This is my css

@use '@angular/material' as mat;
@import '@angular/material/theming';

@include mat-core();

$app-primary: mat.define-palette(mat.$light-blue-palette, 700, 200, 400);
$app-accent: mat.define-palette(mat.$light-blue-palette, A700, A200, A400);
$app-warn: mat.define-palette(mat.$red-palette);

$app-typography: mat.define-typography-config(
  $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
);

$app-theme: mat.define-light-theme(
  (
    color: (
      $app-primary,
      $app-accent,
      $app-warn,
    ),
    typography: $app-typography,
  )
);

@include mat.all-component-themes($app-theme);

Am I missing something ?

Edit

I've changed the mat-core() to mat.core() thx to the @O-9 comment

But that did create further error.

./src/sass/main.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):
SassError: $map: (50: #e1f5fe, 100: #b3e5fc, 200: #81d4fa, 300: #4fc3f7, 
// ...
, "contrast-contrast": null) is not a map.
    ╷
197 │     $primary: map.get($color-settings, primary);
    │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\@angular\material\core\theming\_theming.scss 197:15  define-light-theme()
  src\sass\core.scss 14:13                                          @import
  src\sass\main.scss 10:9                                           root stylesheet

I'm still lost here '^^

Answer 1

The problem is that your legacy typography config contains specifications for "title" and "input" but those 2 are no longer supported by Angular 15. Just take out those 2 entries and it should be fine. The full list of supported entries is:

  $font-family
  $headline-1
  $headline-2
  $headline-3
  $headline-4
  $headline-5
  $headline-6
  $subtitle-1
  $subtitle-2
  $body-1,
  $body-2
  $caption
  $button
  $overline