Undefined mixin error when defining a material theme with Angular 15

Question

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

Do you have `@material/theme/_theme.scss` in you node modules ? Does it contain a mixin named `validate-theme-styles` ? — Matthieu Riegler, Mar 13 '23 at 10:14
@MatthieuRiegler yes the file contains the reference to the mixin — Manuel S., Mar 13 '23 at 10:38
@MatthieuRiegler for clarification: the file @material/linear-progress/_linear-progress-theme.scss is containing the reference to theme/_theme.scss, containing the mixin. — Manuel S., Mar 13 '23 at 10:48

score 0 · Accepted Answer · answered Mar 23 '23 at 08:38

0

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.

answered Mar 23 '23 at 08:38

Manuel S.

120
1
13

I am facing the exact same issue. Which dependency did you end up removing? – Angry Samurai Jul 10 '23 at 04:26
For us it was some material datetimepicker which we replaced in the end – Manuel S. Jul 10 '23 at 16:05
Thank you for sharing, in our case it was @material/list component that we removed and replaced which fixed our problem. – Angry Samurai Jul 11 '23 at 20:15

Undefined mixin error when defining a material theme with Angular 15

1 Answers1