I have been updating the angular version in my app, when I updated from Angular 17 to 18 I got an issue with the angular material in the theme.scss file when I run ng serve. Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Undefined function.

╷
4 │ $md-ssprimary: mat.define-palette(mat.$blue-grey-palette, 500);
  │         

@use '@angular/material' as mat;
// Define custom palettes
$md-ssprimary: mat.define-palette(mat.$blue-grey-palette, 500);
$md-ssaccent: mat.define-palette(mat.$cyan-palette, A200);
$md-sswarn: mat.define-palette(mat.$red-palette);

// Define theme
$ms-ss-theme: mat.define-light-theme((
  color: (
    primary: $md-ssprimary,
    accent: $md-ssaccent,
    warn: $md-sswarn
  )
));

// Apply theme
@include mat.all-component-themes($ms-ss-theme);


// Theme Overrides
.mat-calendar,
.mat-simple-snackbar,
.mat-button,
.mat-raised-button,
.mat-icon-button,
.mat-stroked-button,
.mat-flat-button,
.mat-fab,
.mat-mini-fab {
    @include font-fira-sans-regular;
}

.mat-calendar {
    font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    min-width: 160px !important;
    max-width: 75vw !important;
}

.custom-modal .mat-dialog-container {
  border-radius: 8px;
  box-shadow: 0 5px 18px 0 rgba(155, 155, 155, 0.3);
  padding: 30px 60px;
  max-width: 680px;
}

.mat-dialog-content {
  border-bottom: 2px solid $color-grey;
}

// Snackbar styles
.mat-snack-bar-container {
    min-width: 160px !important;
    max-width: 75vw !important;
    padding: 14px 30px !important;
    border-radius: 8px !important;
    margin-bottom: 1em !important;
}

.mat-simple-snackbar {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
}

.mat-snack-bar-container .mat-button {
    @include font-fira-sans-medium;
    font-size: 16px;
    color: white;
    background: rgba(0, 0, 0, 0.15);
}

// Responsive Styles
@media print {
  .mat-snack-bar-container {
    display: none !important;
  }
}

@media (max-width: 768px) { 
  .mat-snack-bar-container {
    font-size: 14px;
    max-width: none !important;
  }
  .mat-snack-bar-container .mat-button {
    font-size: 14px;
    line-height: 16px;
    padding: 8px;
  }
}

@media (max-width: 576px) { 
  .custom-modal {
    max-width: calc(100vw - 20px) !important;
  }
}

Any help fixing this is much appreciated.

I have been updating the angular version in my app, when I updated from Angular 17 to 18 I got an issue with the angular material in the theme.scss file when I run ng serve. Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Undefined function.

╷
4 │ $md-ssprimary: mat.define-palette(mat.$blue-grey-palette, 500);
  │         

@use '@angular/material' as mat;
// Define custom palettes
$md-ssprimary: mat.define-palette(mat.$blue-grey-palette, 500);
$md-ssaccent: mat.define-palette(mat.$cyan-palette, A200);
$md-sswarn: mat.define-palette(mat.$red-palette);

// Define theme
$ms-ss-theme: mat.define-light-theme((
  color: (
    primary: $md-ssprimary,
    accent: $md-ssaccent,
    warn: $md-sswarn
  )
));

// Apply theme
@include mat.all-component-themes($ms-ss-theme);


// Theme Overrides
.mat-calendar,
.mat-simple-snackbar,
.mat-button,
.mat-raised-button,
.mat-icon-button,
.mat-stroked-button,
.mat-flat-button,
.mat-fab,
.mat-mini-fab {
    @include font-fira-sans-regular;
}

.mat-calendar {
    font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    min-width: 160px !important;
    max-width: 75vw !important;
}

.custom-modal .mat-dialog-container {
  border-radius: 8px;
  box-shadow: 0 5px 18px 0 rgba(155, 155, 155, 0.3);
  padding: 30px 60px;
  max-width: 680px;
}

.mat-dialog-content {
  border-bottom: 2px solid $color-grey;
}

// Snackbar styles
.mat-snack-bar-container {
    min-width: 160px !important;
    max-width: 75vw !important;
    padding: 14px 30px !important;
    border-radius: 8px !important;
    margin-bottom: 1em !important;
}

.mat-simple-snackbar {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
}

.mat-snack-bar-container .mat-button {
    @include font-fira-sans-medium;
    font-size: 16px;
    color: white;
    background: rgba(0, 0, 0, 0.15);
}

// Responsive Styles
@media print {
  .mat-snack-bar-container {
    display: none !important;
  }
}

@media (max-width: 768px) { 
  .mat-snack-bar-container {
    font-size: 14px;
    max-width: none !important;
  }
  .mat-snack-bar-container .mat-button {
    font-size: 14px;
    line-height: 16px;
    padding: 8px;
  }
}

@media (max-width: 576px) { 
  .custom-modal {
    max-width: calc(100vw - 20px) !important;
  }
}

Any help fixing this is much appreciated.

• angular
• angularjs
• angular-material

1 Answer 1

Please use the new method to define a theme, you are still using the old method to define the theme, maybe that is causing the undefined.

Material Theming Docs - 18

@use '@angular/material' as mat;
// Define custom palettes
$md-ssprimary: $blue-palette;
$md-ssaccent: $cyan-palette;

$ms-ss-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $md-ssprimary,
    tertiary: $md-ssaccent,
  )
));

// Apply theme
@include mat.all-component-themes($ms-ss-theme);

@include mat.core();
@include mat.color-variants-backwards-compatibility($ms-ss-theme);