v11 到 14 升级后，Angular 自定义材质主题未加载

Question

更新- 主线程帖子底部的解决方案 -

样式.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;，但这并没有改变错误。

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

有人知道问题是什么吗？我通过 - 将 styles.scss 包含到我的 angular.json 中

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

我尝试将 styles.scss 和material.scss（自定义主题）导入到 angular.json，但遇到一个问题，即开发人员的第一页始终在未加载 Angular Material 的情况下加载。其他页面没有问题，质量检查工作正常。

更新解决方案： 问题是 SASS 可能存在 UTF-8-BOM 编码问题。我必须检查所有 .scss 文件并确保编码设置为 UTF-8。我的 Material.scss 是用带有 BOM 的 UTF-8 编码的，这导致了这个问题。我使用 Notepad++ 来更改编码。请参阅 github 上的问题 - https://github.com/angular/components/issues/24227

感谢 @Anglesvar 提供的 github 链接解决了这个问题。

Answer 1

解决方案相当简单。在 Angular 13+ 之后，我们不需要使用 tilde 导入样式@use ~() as xxx。确保在升级到 Angular 14 时使用正确的命令。我发现这个 git 问题可能也有一些帮助。

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;