Angular Material Theme Styles not applying in Migrated Angular Project - css

Question

I am trying to migrate an older Angular v9 project to the latest version (as of writing) v13. I have successfully migrated everything except the styles, particularly the Angular Material theme styles, which do not appear to apply at all.
Here is a comparison of the same Login page:
Angular v9
Angular v13
Apologies for not being able to post the whole page, but these are the relevant parts. Ignoring the increased height and input fields, which I understand need to be done differently in HTML, the buttons look completely wrong. Inspecting the items reveals that the basic styling for the shape and form are being applied from Angular Material, but seemingly the custom theme styles do not work at all. When investigating further, I can see that it appears that the custom theme styles, defined in a SCSS file, are being generated, but the CSS class names are being mangled:
material.module.scss:
#use "#angular/material" as mat;
#import "environment.scss";
#import "./material.variables";
#import "../Scss/variables";
// Include the common styles for Angular Material. We include this here so that you only have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
$typography: mat.define-typography-config($font-family: $primary-font-face);
#include mat.core($typography);
// Theme Configuration
$primary-colour: $primary;
$primary-lighter-colour: #bde8f9;
$primary-darker-colour: #1498e1;
$accent-colour: $green;
$accent-lighter-colour: $green-pastel;
$accent-darker-colour: $green-dark;
$warn-colour: $red;
$warn-lighter-colour: $red-pastel;
$warn-darker-colour: $red-dark;
#mixin mat-body-variables($name, $main-colour, $lighter-colour, $darker-colour, $text-colour) {
--#{$name}-color: #{$main-colour};
--#{$name}-lighter-color: #{$lighter-colour};
--#{$name}-darker-color: #{$darker-colour};
--text-#{$name}-color: #{$text-colour};
--text-#{$name}-lighter-color: #{$text-colour};
--text-#{$name}-darker-color: #{$text-colour};
}
body {
#include mat-body-variables(primary, $primary-colour, $primary-lighter-colour, $primary-darker-colour, $light-text);
#include mat-body-variables(accent, $accent-colour, $accent-lighter-colour, $accent-darker-colour, $light-text);
#include mat-body-variables(warn, $warn-colour, $warn-lighter-colour, $warn-darker-colour, $light-text);
}
#function get-material-palette($main-colour, $light-colour, $dark-colour, $text-colour) {
$mat: (
50: $light-colour,
500: $main-colour,
900: $dark-colour,
text: $text-colour,
contrast: (
50: $text-colour,
500: $text-colour,
900: $text-colour,
)
);
#return mat.define-palette($mat, 500, 50, 900, text);
}
$theme-primary: get-material-palette($primary-colour, $primary-lighter-colour, $primary-darker-colour, $light-text);
$theme-accent: get-material-palette($accent-colour, $accent-lighter-colour, $accent-darker-colour, $light-text);
$theme-warn: get-material-palette($warn-colour, $warn-lighter-colour, $warn-darker-colour, $light-text);
$theme: mat.define-dark-theme((
color: (
primary: $theme-primary,
accent: $theme-accent,
warn: $theme-warn
)
));
#include mat.all-component-themes($theme);
$lightTheme: mat.define-light-theme((
color: (
primary: $theme-primary,
accent: $theme-accent,
warn: $theme-warn
)
));
.light-theme {
#include mat.all-component-colors($lightTheme);
}
.mat-raised-button,
.mat-form-field {
width: 100%;
}
mat-tab-group,
.mat-tab-body-wrapper {
height: 100%;
}
button,
.mat-flat-button,
.mat-raised-button {
transition: background-color 0.2s, color 0.2s;
}
Seeming output in Chrome Inspector of generated styles.css (partial for brevity):
And scrolling further up I can see the custom colours interspersed in the mangled CSS classes, so I assume these are the theme styles.
My question is then, how do I correctly import & apply these styles to the project?
The theme stylesheet is currently included in the angular.json file, as recommended by the Theming Angular Material Guide (emphasis mine):
To include the emitted styles in your application, add your theme file to the styles array of your project's angular.json file.
although I have tried including it in our main stylesheet for this project, to no avail.
I have also tried changing the optimisation settings in angular.json, as well as messing around with supposed environment variables that control the mangling of the CSS names, but neither of those worked, nor particularly appeal as solutions.
Fwiw, what does seem to work is when I include one of the prebuilt theme stylesheets into the styles array, then they apply correctly. I have also tried creating separate projects outside of this one to see if it was my environment messing with things, however with both the default Angular Material themes, and our custom theme, the theming worked correctly.
So please, can anyone help with this frustrating issue?
Thank you, Will