升级到 Angular Material 17 后,我的 Angular 应用程序代码库遇到两个不同的问题:
@include mat.legacy-core() 错误: 使用指令 @include mat.legacy-core(); 时,我遇到编译错误。看来这个指令在编译过程中引起了问题,但我不确定如何解决它。
@import“@angular/material/theming”时出错: 此外,我在自定义主题.scss 文件中导入“@angular/material/theming”模块时遇到问题。
这是我的代码:
@use "@angular/material" as mat;
@import "@angular/material/theming";
// Fonts
@import "https://fonts.googleapis.com/css?family=Material+Icons";
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
@include mat.core();
@include mat.legacy-core();
$fontConfig: (
display-4: mat-typography-level(112px, 112px, 300, "Roboto", -0.0134em),
display-3: mat-typography-level(56px, 56px, 400, "Roboto", -0.0089em),
display-2: mat-typography-level(45px, 48px, 400, "Roboto", 0em),
display-1: mat-typography-level(34px, 40px, 400, "Roboto", 0.0074em),
headline: mat-typography-level(24px, 32px, 400, "Roboto", 0em),
title: mat-typography-level(20px, 32px, 500, "Roboto", 0.0075em),
subheading-2: mat-typography-level(16px, 28px, 400, "Roboto", 0.0094em),
subheading-1: mat-typography-level(15px, 24px, 500, "Roboto", 0.0067em),
body-2: mat-typography-level(14px, 24px, 500, "Roboto", 0.0179em),
body-1: mat-typography-level(14px, 20px, 400, "Roboto", 0.0179em),
button: mat-typography-level(14px, 14px, 500, "Roboto", 0.0893em),
caption: mat-typography-level(12px, 20px, 400, "Roboto", 0.0333em),
input: mat-typography-level(inherit, 1.125, 400, "Roboto"),
);
// Foreground Elements
// Light Theme Text
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 0.87);
$dark-accent-text: rgba($dark-primary-text, 0.54);
$dark-disabled-text: rgba($dark-primary-text, 0.38);
$dark-dividers: rgba($dark-primary-text, 0.12);
$dark-focused: rgba($dark-primary-text, 0.12);
$mat-light-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba($dark-text, 0.26),
disabled-text: $dark-disabled-text,
elevation: black,
secondary-text: $dark-accent-text,
hint-text: $dark-disabled-text,
accent-text: $dark-accent-text,
icon: $dark-accent-text,
icons: $dark-accent-text,
text: $dark-primary-text,
slider-min: $dark-primary-text,
slider-off: rgba($dark-text, 0.26),
slider-off-active: $dark-disabled-text,
);
// Dark Theme text
$light-text: #ffffff;
$light-primary-text: $light-text;
$light-accent-text: rgba($light-primary-text, 0.7);
$light-disabled-text: rgba($light-primary-text, 0.5);
$light-dividers: rgba($light-primary-text, 0.12);
$light-focused: rgba($light-primary-text, 0.12);
$mat-dark-theme-foreground: (
base: $light-text,
divider: $light-dividers,
dividers: $light-dividers,
disabled: $light-disabled-text,
disabled-button: rgba($light-text, 0.3),
disabled-text: $light-disabled-text,
elevation: black,
hint-text: $light-disabled-text,
secondary-text: $light-accent-text,
accent-text: $light-accent-text,
icon: $light-text,
icons: $light-text,
text: $light-text,
slider-min: $light-text,
slider-off: rgba($light-text, 0.3),
slider-off-active: rgba($light-text, 0.3),
);
// Background config
// Light bg
$light-background: #fafafa;
$light-bg-darker-01: darken($light-background, 0.1%);
$light-bg-darker-5: darken($light-background, 5%);
$light-bg-darker-10: darken($light-background, 10%);
$light-bg-darker-20: darken($light-background, 20%);
$light-bg-darker-30: darken($light-background, 30%);
$light-bg-lighter-5: lighten($light-background, 5%);
$dark-bg-tooltip: lighten(#2c2c2c, 20%);
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
$mat-light-theme-background: (
background: $light-background,
status-bar: $light-bg-darker-20,
app-bar: $light-bg-darker-5,
hover: $dark-bg-alpha-4,
card: $light-bg-lighter-5,
dialog: $light-bg-lighter-5,
tooltip: $dark-bg-tooltip,
disabled-button: $dark-bg-alpha-12,
raised-button: $light-bg-lighter-5,
focused-button: $dark-focused,
selected-button: $light-bg-darker-20,
selected-disabled-button: $light-bg-darker-30,
disabled-button-toggle: $light-bg-darker-10,
unselected-chip: $light-bg-darker-10,
disabled-list-option: $light-bg-darker-10,
);
// Dark bg
$dark-background: #2c2c2c;
$dark-bg-lighter-3: lighten($dark-background, 3%);
$dark-bg-lighter-5: lighten($dark-background, 5%);
$dark-bg-lighter-10: lighten($dark-background, 10%);
$dark-bg-lighter-20: lighten($dark-background, 20%);
$dark-bg-lighter-30: lighten($dark-background, 30%);
$light-bg-alpha-4: rgba(#fafafa, 0.04);
$light-bg-alpha-12: rgba(#fafafa, 0.12);
// Background palette for dark themes.
$mat-dark-theme-background: (
background: $dark-background,
status-bar: $dark-bg-lighter-20,
app-bar: $dark-bg-lighter-5,
hover: $light-bg-alpha-4,
card: $dark-bg-lighter-5,
dialog: $dark-bg-lighter-5,
tooltip: $dark-bg-lighter-20,
disabled-button: $light-bg-alpha-12,
raised-button: $dark-bg-lighter-5,
focused-button: $light-focused,
selected-button: $dark-bg-lighter-20,
selected-disabled-button: $dark-bg-lighter-30,
disabled-button-toggle: $dark-bg-lighter-10,
unselected-chip: $dark-bg-lighter-20,
disabled-list-option: $dark-bg-lighter-10,
);
// Theme Config
body {
--primary-color: #0073bd;
--primary-lighter-color: #b3d5eb;
--primary-darker-color: #0056a6;
--text-primary-color: #{$light-primary-text};
--text-primary-lighter-color: #{$dark-primary-text};
--text-primary-darker-color: #{$light-primary-text};
}
$mat-primary: (
main: #0073bd,
lighter: #b3d5eb,
darker: #0056a6,
200: #0073bd,
contrast: (
main: $light-primary-text,
lighter: $dark-primary-text,
darker: $light-primary-text,
),
);
$theme-primary: mat-palette($mat-primary, main, lighter, darker);
body {
--accent-color: #0073bd;
--accent-lighter-color: #b3d5eb;
--accent-darker-color: #0056a6;
--text-accent-color: #{$light-primary-text};
--text-accent-lighter-color: #{$dark-primary-text};
--text-accent-darker-color: #{$light-primary-text};
}
$mat-accent: (
main: #0073bd,
lighter: #b3d5eb,
darker: #0056a6,
200: #0073bd,
contrast: (
main: $light-primary-text,
lighter: $dark-primary-text,
darker: $light-primary-text,
),
);
$theme-accent: mat-palette($mat-accent, main, lighter, darker);
body {
--warn-color: #ff0000;
--warn-lighter-color: #ffb3b3;
--warn-darker-color: #ff0000;
--text-warn-color: #{$light-primary-text};
--text-warn-lighter-color: #{$dark-primary-text};
--text-warn-darker-color: #{$light-primary-text};
}
$mat-warn: (
main: #ff0000,
lighter: #ffb3b3,
darker: #ff0000,
200: #ff0000,
contrast: (
main: $light-primary-text,
lighter: $dark-primary-text,
darker: $light-primary-text,
),
);
$theme-warn: mat-palette($mat-warn, main, lighter, darker);
$light-theme: mat-light-theme(
(
color: (
primary: $theme-primary,
accent: $theme-accent,
),
typography: mat.define-legacy-typography-config(),
density: 0,
)
);
$dark-theme: mat-dark-theme(
(
color: (
primary: $theme-primary,
accent: $theme-accent,
),
typography: mat.define-legacy-typography-config(),
density: 0,
)
);
@include mat.all-component-themes($light-theme);
::ng-deep
.mat-mdc-text-field-wrapper
.mat-mdc-form-field-flex
.mat-mdc-floating-label {
top: 19px !important;
}
.theme-dark {
background-color: $dark-background !important;
color: $light-text !important;
/* .mat-expansion-panel {
color: white !important;
background-color: #424242 !important;
} */
.mat-mdc-card {
color: white !important;
background-color: #424242 !important;
}
@include mat.all-component-colors($dark-theme);
}
这些问题阻碍了我的进步,我正在寻求帮助来解决它们。任何关于如何解决这两个错误的见解、建议或指导将不胜感激。谢谢您的帮助!
我尝试使用@import '~@angular/material/theming';。并尝试删除 @include mat.legacy-core();.
当我这样做时,我遇到了其他问题。
@import '@angular/material/theming'
似乎已在 v17 中删除,您一定会遇到此错误 => 无法解析文件“主题”。
您只需删除材质/主题导入即可,您的主题应该可以工作
@use '@angular/material' as mat;
与 @include mat.legacy-core() 存在同样的问题遗留组件的 Angular Material 15 样式。