3

angular material 15 looking for @include theme.validate-theme-styles($light-theme, $theme); however, validate-theme-styles is indeed not defined.

I just updated angular and angular material to 15, the custom theme is now throwing build errors. it worked fine with version 14.

./src/lawyer.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 402: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 402:3            private-check-duplicate-theme-styles()
  node_modules\@angular\material\core\theming\_all-theme.scss 44:3           all-component-themes()
  src\lawyer.scss 27:1                                                       root stylesheet
  node_modules\@angular\material\progress-bar\_progress-bar-theme.scss 60:7  @content
  node_modules\@angular\material\core\theming\_theming.scss 402: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 402:3            private-check-duplicate-theme-styles()
  node_modules\@angular\material\core\theming\_all-theme.scss 44:3           all-component-themes()
  src\lawyer.scss 27:1                                                       root stylesheet

Here is my scss file:

@use '@angular/material' as mat;

@include mat.core();

/*The define-palette Sass function accepts a color palette, described in the Palettes section above,
as well as four optional hue numbers.
These four hues represent, in order: the "default" hue, a "lighter" hue, a "darker" hue, and a "text" hue.*/

$my-primary: mat.define-palette(mat.$indigo-palette, 800);
$my-accent: mat.define-palette(mat.$green-palette, A700);
$my-warn: mat.define-palette(mat.$red-palette,A700);

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


//@include mat.core-theme($my-theme);
//@include mat.button-theme($my-theme);

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

I tested the root cause is because of the last line, if I use core-theme and button-theme, not all-component-themes, it can build fine.

Tao Feng
  • 101
  • 1
  • 5

1 Answers1

0

In our case it was caused by a direct dependency we had in our package.json. The dependency was @material/icon-button, version 14.0.0. That transitively brought in old versions of material stylesheets. We were able to remove the dependency after which the problem was solved for us.

Rob
  • 1