Angular Material custom theme error SassError: Only 0 arguments allowed, but 1 was passed

Question

I generate a custom theme from Material Theme Generator

My theme is something like

@use '@angular/material' as mat;

@import 'https://fonts.googleapis.com/css?family=Material+Icons';
@import url('https://fonts.googleapis.com/css?family=Amiri:300,400,500');

$fontConfig: (
  display-4: mat.define-typography-level(52px, 56px, 300, 'Amiri', -0.0288em),
  display-3: mat.define-typography-level(38px, 38px, 400, 'Amiri', -0.0132em),
  display-2: mat.define-typography-level(32px, 36px, 400, 'Amiri', 0em),
  display-1: mat.define-typography-level(28px, 32px, 400, 'Amiri', 0.0089em),
  headline: mat.define-typography-level(24px, 32px, 400, 'Amiri', 0em),
  title: mat.define-typography-level(20px, 32px, 500, 'Amiri', 0.0075em),
  subheading-2: mat.define-typography-level(16px, 28px, 400, 'Amiri', 0.0094em),
  subheading-1: mat.define-typography-level(15px, 24px, 500, 'Amiri', 0.0067em),
  body-2: mat.define-typography-level(14px, 24px, 500, 'Amiri', 0.0179em),
  body-1: mat.define-typography-level(14px, 20px, 400, 'Amiri', 0.0179em),
  button: mat.define-typography-level(14px, 14px, 500, 'Amiri', 0.0893em),
  caption: mat.define-typography-level(12px, 20px, 400, 'Amiri', 0.0333em),
  input: mat.define-typography-level(inherit, 1.125, 400, 'Amiri', 1.5px),
);
@include mat.core($fontConfig);

I have removed other configurations to only the lines that throw the below error

./apps/my-project/src/theme/custom.theme.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Only 0 arguments allowed, but 1 was passed.
  ┌──> apps\my-project\src\theme\custom.theme.scss
33│ @include mat.core($fontConfig);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
  ╵
  ┌──> node_modules\@angular\material\core\_core.scss
8 │ @mixin core() {
  │        ━━━━━━ declaration
  ╵
  apps\my-project\src\theme\custom.theme.scss 33:1  core()
  apps\my-project\src\theme\custom.theme.scss 33:1  root stylesheet

./apps/my-project/src/theme/custom.theme.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: Only 0 arguments allowed, but 1 was passed.
  ┌──> apps\my-project\src\theme\custom.theme.scss
33│ @include mat.core($fontConfig);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
  ╵
  ┌──> node_modules\@angular\material\core\_core.scss
8 │ @mixin core() {
  │        ━━━━━━ declaration
  ╵
  apps\my-project\src\theme\custom.theme.scss 33:1  core()
  apps\my-project\src\theme\custom.theme.scss 33:1  root stylesheet

The app was running well but after an upgrade to angular 15, the above error started appearing

Rigmarole

Answer 1

Upgrading to Angular 15 is the most complex Angular Upgrade I have seen so far.

I also used a custom theme from Material Theme Generator.

I had to make quite a few changes to the Theme scss in order to work things out.

First the Font Config to be inline with the current Material Specs: -

$fonts: mat.define-typography-config(
  $headline-1: mat.define-typography-level(24px, 32px, 400, $font-family: "Amiri"),
  ...  
);

Using the spec here https://material.angular.io/guide/typography

Then when initialising the theme I used this: -

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

// Theme Init
@include mat.all-component-themes($theme);
.theme-alternate {
  @include mat.all-component-colors($altTheme);
}

Ledaledah

Appreciate finding this answer, otherwise would have been digging for hours trying to figure it out. The Material Theme Generator is a great tool, but needs some updating. – Dangerfield

Answer 2

Your error is that you have the argument in the @include mat.core(); But in Angular 15 it has to be empty.

write in your base file @include mat.core();

and in the theme file you have to add typography and density to the $theme mat-define-light-theme

$typography: mat.define-legacy-typography-config();

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

i fixed my issue with the arguments in that way.

Greenshank

Answer 3

Try changing the config semantics like below :

ng config schematics.@schematics/angular:component.styleext scss

Merras

$ ng config schematics.@schematics/angular:component.styleext scss Error: Schema validation failed with the following errors: Data path "/schematics/@schematics~1angular:component" must NOT have additional properties(styleext). – Cher

Answer 4

I had the same problem and I have found that according to Angular Material v15's guideline on Migrating to MDC-based Angular Material Components, we need to run the following command (it will ask if we want to limit the migration to a specific directory):

ng generate @angular/material:mdc-migration

Unfortunately, this did NOT solve my problem.

Virile

Answer 5

I had to remove the pre-built one from compiling in angular.json.

Remove this line highlighted, fixed the error:

Overpowering