Angular Custom Material Theme not loading after v11 to 14 upgrade

Question

Update - solution at bottom of main thread post -

Styles.scss

@import "./material";

$pace-red: #bb2d1c;
$green: #008000;
$red: #f00;
$black: #000;

body {
  margin: 0;
}
...

Custom Theme - Material.scss

@use '~@angular/material' as mat;
@import '@angular/material/theming';
@include mat.core();

$core-app-primary: mat.define-palette(mat.$red-palette, A700);
$core-app-accent: mat.define-palette(mat.$blue-palette, 500);
$core-app-warn: mat.define-palette(mat.$amber-palette, 800);
$core-app-theme: mat.define-light-theme($core-app-primary, $core-app-accent, $core-app-warn);

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

I receive an error saying it cannot build the module due to the @use. I have also tried using @use '~@angular/material' as mat; but that doesn't change the error.

Package.json

{
  "name": "xxxxx-core-cli",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "hmr": "ng serve --configuration hmr",
    "stats": "webpack-bundle-analyzer wwwroot/stats.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "14.2.0",
    "@angular/cdk": "^14.2.0",
    "@angular/common": "14.2.0",
    "@angular/compiler": "14.2.0",
    "@angular/core": "14.2.0",
    "@angular/flex-layout": "^14.0.0-beta.40",
    "@angular/forms": "14.2.0",
    "@angular/material": "^14.2.0",
    "@angular/platform-browser": "14.2.0",
    "@angular/platform-browser-dynamic": "14.2.0",
    "@angular/platform-server": "14.2.0",
    "@angular/router": "14.2.0",
    "@material/banner": "^14.0.0",
    "angular-plotly.js": "^4.0.4",
    "core-js": "^3.25.0",
    "hammerjs": "^2.0.8",
    "ng2-currency-mask": "^13.0.3",
    "ng2-file-upload": "^1.4.0",
    "npm": "^8.18.0",
    "plotly.js": "^2.14.0",
    "rxjs": "^7.5.6",
    "tslib": "^2.4.0",
    "xlsx": "^0.18.5",
    "yarn": "^1.22.19",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.1",
    "@angular/cli": "14.2.1",
    "@angular/compiler-cli": "14.2.0",
    "@angular/language-service": "14.2.0",
    "@angularclass/hmr": "^3.0.0",
    "@types/jasmine": "^4.3.0",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "^18.7.13",
    "codelyzer": "^6.0.2",
    "jasmine": "^4.3.0",
    "jasmine-core": "~4.3.0",
    "jasmine-reporters": "^2.5.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.1",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-firefox-launcher": "^2.1.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "karma-tfs-reporter": "^1.0.2",
    "protractor": "~7.0.0",
    "sass": "^1.54.8",
    "sass-lint": "^1.13.1",
    "sass-loader": "^13.0.2",
    "ts-node": "^10.9.1",
    "tslint": "~6.1.0",
    "tslint-angular": "^3.0.3",
    "typescript": "4.8.2",
    "webpack": "^5.74.0",
    "webpack-bundle-analyzer": "^4.6.1"
  }
}

Anyone know what the issue is? I am including the styles.scss into my angular.json via -

"styles": [
              "ClientApp/styles.scss"
            ],

I have tried importing both styles.scss and material.scss (custom theme) to the angular.json but am having an issue where the first page on dev always loads without Angular Material loaded. Other pages have no issues and QA works fine.

UPDATE SOLUTION: The issue is that SASS can have issues with UTF-8-BOM encoding. I had to go through all my .scss files and ensure the encoding was set to UTF-8. My Material.scss was encoded with UTF-8 with BOM which caused the issue. I used Notepad++ to change encodings. See issue on github here - https://github.com/angular/components/issues/24227

Thanks to @Anglesvar for the github link which solved the issue.

Answer 1

The solution is a rather simple one. After Angular 13+, we don't need to import styles with tilde @use ~() as xxx. Make sure you use the proper command while upgrading to Angular 14. I found this git issue which might be of some help as well.

https://github.com/angular/components/issues/24227

https://update.angular.io/?v=13.0-14.0

@use "~@angular/material" as mat;

@use "@angular/material" as mat;