0

I just upgraded Angular project to latest version (medium size project with Angular Material). When trying to build it I get following errors from multiple components' scss files.

./src/app/layout/navbar/navbar.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
  ╷
7 │     color: mt.get-color-from-palette(theme.$foreground, inverted);
  │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\app\layout\navbar\navbar.component.scss 7:12  root stylesheet

Weird thing is that when inspecting imports in file in question I get following:

// navbar.component.scss
@use '~@angular/material' as mat; // Ctrl + click -> path inaccessible
@use '../../../theme/goscan-theme' as theme; // Ctrl + click -> opens the file
@use '~@angular/material/theming' as mt; // Ctrl + click -> opens the file

Installed dependencies:

"@angular/animations": "~12.0.2",
"@angular/cdk": "~12.0.2",
"@angular/common": "~12.0.2",
"@angular/compiler": "~12.0.2",
"@angular/core": "~12.0.2",
"@angular/forms": "~12.0.2",
"@angular/localize": "^12.0.2",
"@angular/material": "^12.0.2",
"@angular/platform-browser": "~12.0.2",
"@angular/platform-browser-dynamic": "~12.0.2",
"@angular/router": "~12.0.2",
...

I already followed this solution to fix some build errors but I can't get pass this one. Any ideas?

mat.hudak
  • 2,803
  • 2
  • 24
  • 39

1 Answers1

2

Per https://material.angular.io/guide/theming#reading-hues-from-palettes

In your case, you need to use mat.get-color-from-palette (instead of mt.get-color-from-palette), as the get-color-from-palette function lives in '~@angular/material' package.

Maciej Manista
  • 158
  • 4