Angular 15 和 Material 15 原色

Question

自从更新到 Angular 15 和 Material 15 后，我的 theme.scss 和 Primary Color 仍然无法再工作。\n自从两个小时以来，我尝试了很多东西，但没有任何效果。我已将样式表从 css 更改为 scss。

\n

在 Material 14 中，我的 theme.scss 如下所示：

\n

@import '~@angular/material/theming';\n@include mat-core();\n\n$md-elearningsupportportalwebapp-primary: (\n    50 : #f2e2f0,\n    100 : #dfb8d8,\n    200 : #c988bf,\n    300 : #b358a5,\n    400 : #a33591,\n    500 : #93117e,\n    600 : #8b0f76,\n    700 : #800c6b,\n    800 : #760a61,\n    900 : #64054e,\n    A100 : #ff95e3,\n    A200 : #ff62d5,\n    A400 : #ff2fc8,\n    A700 : #ff15c1,\n    contrast: (\n        50 : #000000,\n        100 : #000000,\n        200 : #000000,\n        300 : #ffffff,\n        400 : #ffffff,\n        500 : #ffffff,\n        600 : #ffffff,\n        700 : #ffffff,\n        800 : #ffffff,\n        900 : #ffffff,\n        A100 : #000000,\n        A200 : #000000,\n        A400 : #ffffff,\n        A700 : #ffffff,\n    )\n);\n$md-elearningsupportportalwebapp-accent: (\n    50 : #e0eaf3,\n    100 : #b3cbe2,\n    200 : #80a8cf,\n    300 : #4d85bb,\n    400 : #266bad,\n    500 : #00519e,\n    600 : #004a96,\n    700 : #00408c,\n    800 : #003782,\n    900 : #002770,\n    A100 : #9fb8ff,\n    A200 : #6c92ff,\n    A400 : #396cff,\n    A700 : #1f59ff,\n    contrast: (\n        50 : #000000,\n        100 : #000000,\n        200 : #000000,\n        300 : #ffffff,\n        400 : #ffffff,\n        500 : #ffffff,\n        600 : #ffffff,\n        700 : #ffffff,\n        800 : #ffffff,\n        900 : #ffffff,\n        A100 : #000000,\n        A200 : #000000,\n        A400 : #ffffff,\n        A700 : #ffffff,\n    )\n);\n$my-app-primary: mat-palette($md-elearningsupportportalwebapp-primary);\n$my-app-accent:  mat-palette($md-elearningsupportportalwebapp-accent);\n$my-app-warn:    mat-palette($mat-deep-orange);\n$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);\n@include angular-material-theme($my-app-theme);\n

\n

和我的角度 json：

\n

"styles": [\n              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",\n              "src/styles.scss",\n              "src/theme.scss",\n              "./node_modules/material-icons-font/material-icons-font.css"\n            ],\n

\n

错误：

\n

./src/theme.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import '~@angular/material/theming';\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src\\theme.scss 1:9  root stylesheet\n

\n

我尝试将其添加到 styles.scss => 不起作用..我已阅读文档，但仍然没有 wrokign => 不知道？

\n

Answer 1

您可以在此页面上找到完整的迁移说明。您还可以检查他们的 cli 迁移工具，以便轻松地从@angular/material v14 to v15+

$ ng generate @angular/material:mdc-migration

有关主题的更多文档，您可以使用官方主题文档

据我所知，你的问题是你没有正确修改你的 styles.css

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

...

$my-app-primary: mat.define-palette($md-elearningsupportportalwebapp-primary);
$my-app-accent:  mat.define-palette($md-elearningsupportportalwebapp-accent);
$my-app-warn:    mat.define-palette($mat-deep-orange);
$my-app-theme:   mat.define-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  )
));

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