Issue with angular material

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.

Continue reading...