Angular从v11升级到v14后自定义Material主题加载失败

更新 - 解决方案在帖子底部

Styles.scss 文件内容 #

@import "./material";

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

body {
  margin: 0;
}
...

自定义主题文件 - 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);
...

构建模块时出现错误，提示@use指令存在问题。尝试过@use '~@angular/material' as mat;，错误依旧。

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"
  }
}

我通过angular.json引入styles.scss：

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

尝试同时在angular.json中引入styles.scss和material.scss（自定义主题），但出现开发环境下首页面加载时Angular Material未加载的问题，其他页面正常，QA环境无问题。

有人知道问题出在哪里吗？

更新解决方案：
问题根源是SASS对UTF-8-BOM编码的处理存在兼容性问题。需要检查所有.scss文件，确保编码设置为纯UTF-8格式。我的Material.scss文件使用的是UTF-8 with BOM编码，这直接导致了构建错误。用Notepad++将文件编码修改为UTF-8（无BOM）后，问题解决。

感谢@Anglesvar提供的问题排查线索。

内容的提问来源于stack exchange，提问作者Airo