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 '^^

@O-9 could not be. I have the same thing in my project as well and it works fine. In fact, that css file is automatically generated whenever you create a angular app — Luigi Woodhouse, Feb 06 '23 at 14:13
@O-9 Indeed, I see that it should be `mat.core()` instead of `mat-core()` good catch. That said, doing so I get a bunch of other errors. debugged it a little bit & posted my further investigation in the question — Raphaël Balet, Feb 06 '23 at 15:30
Are the contents of the `sass/core.scss` file the same as the contents that you've pasted in your question? The error shows code that doesn't appear to exist in that file. — Edric, Feb 07 '23 at 01:00
@Edric Yes, it have the same content. I also trying to remove the `@import '@angular/material/theming';` but it didn't helped — Raphaël Balet, Feb 07 '23 at 06:35

score 2 · Answer 1 · answered Feb 21 '23 at 09:40

2

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

answered Feb 21 '23 at 09:40

Michel Reij

181
1
6

Thx for your answer, could you point me out where I should add this piece of code? – Raphaël Balet Feb 21 '23 at 12:24
I have similar error while trying to compile the project, getting: "SassError: No arguments named $display-4, $display-3, $display-2, $display-1, $headline, $title, $subheading-2, $subheading-1 or $input". What do you mean "to take out"? What should I put instead to make it look nice like before? :) – Alexander Feb 25 '23 at 00:32
Have a look at the typography section in Angular Material’s documentation: https://material.angular.io/guide/typography – Michel Reij Feb 25 '23 at 06:56

score 0 · Answer 2 · answered Feb 06 '23 at 12:32

0

You can try the following commands in the order I have listed them before going to the next one. At times you may encounter many variations of node_modules errors whenever you change your angular version

1.npm install --save-dev webpack

2.npm link webpack

3.npm cache clean --force

The screenshot above is an example of the errors that I used to face and I honestly don't know how they just pop out of the blue like that.

answered Feb 06 '23 at 12:32

Luigi Woodhouse

332
3
14

Hi and thx for your help, not sure though how this should help me.. – Raphaël Balet Feb 06 '23 at 15:17

score 0 · Answer 3 · answered Feb 06 '23 at 15:32

Temporary workaround

I could manage to make it work doing the following.

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

@include mat.core();

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

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

@include angular-material-theme($app-theme);

It does looks incorrect to me, so if anybody find a better solution, I'll be glad to remove this answer.

Angular v15, no arguments named $title or $input

Edit

3 Answers3