CODEWITHSUNDEEP
angularangular-materialangular15
Manuel S.
Manuel S.

Reputation: 170

Undefined mixin error when defining a material theme with Angular 15

I updated my project to Angular 15 (15.2.1) and use the latest Material Design package (15.2.1) as well. When defining the theme like described in the documentation I get the error:


./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
54 │   @include theme.validate-theme-styles($light-theme, $theme);
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  @material/linear-progress/_linear-progress-theme.scss 54:3                 theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 14:3  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 35:7  @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 193:5    @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 233:3    disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 192:3    using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 33:3  color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 60:7  @content
  node_modules/@angular/material/core/theming/_theming.scss 403:3            private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 54:3  theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47:5           @content
  node_modules/@angular/material/core/theming/_theming.scss 403:3            private-check-duplicate-theme-styles()
  node_modules/@angular/material/core/theming/_all-theme.scss 44:3           all-component-themes()
  src/styles.scss 24:1                                                       root stylesheet

My code to define the theme is copied from the documentation: https://material.angular.io/guide/theming#applying-a-theme-to-components


@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

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

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

It seems the problem comes from mat.all-component-themes

Upvotes: 6

Views: 7387

Answers (1)

Manuel S.
Manuel S.

Reputation: 170

The problem was an incompatible package that was used in the project. I debugged by removing dependency by dependency, starting with ones that were material or component related.

Upvotes: 1

Related Questions