主页 / coding / 问题 / 78827837
Accepted
Nietzsche
Asked: 2024-08-03 12:36:17 +0800 CST

如何更改代码以使用 @use 而不是 @import

  • 772

我目前正在将俱乐部应用程序从 Angular 9 重新设计到 18，因为它的维护不太好。我试图尽可能多地保留前端，因此也希望保持设计大致相同。

我发现以下代码在此代码中定义了我们的应用程序的主题：

@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($material-primary);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-red);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);

这可以在 colours.scss 中找到，它在我们的旧应用程序的 style.scss 中引用。我想保留所有内容，但从 Angular 17 开始，@importist 不再可用，我应该使用@use（就像这张票一样：https://github.com/angular/components/issues/28204）

我曾尝试自己更改代码，并在 ChatGPT 的帮助下得出了以下结论：

@use '@angular/material' as mat;

@include mat.core();

$my-app-primary: mat.define-palette(mat.$indigo-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, 500, 900, 'A100');
$my-app-warn: mat.define-palette(mat.$red-palette);

$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);

不幸的是，它不起作用，我收到以下错误：“未知函数：'define-palete'”等等。

有人知道正确的语法是什么吗？即使是 Angular 提供的教程仍然引用旧系统：https://v7.material.angular.io/guide/theming

css

3 个回答

  1. Best Answer

    在具有 M3 主题的 Angular 18 中，不再有该define-palette()功能。要创建 M2 调色板，请使用mat.m2-define-palette()。如果要创建自定义 M3 主题，请使用自定义主题生成示意图：

    ng generate @angular/material:m3-theme
    • 2

  2. 您的 Angular 9 应用正在使用 Material 2，它不再是默认设置。以下是使用 Material 3 的 Angular Material 18 的正确语法：

    @use '@angular/material' as mat;

@include mat.core();

$my-theme: mat.define-theme((
  color: (
  theme-type: light,
  primary: mat.$violet-palette,
  )
));

html {
  @include mat.all-component-themes($my-theme);
}
    • 0

  3. 这可能会有所帮助，应该与 Angular Material 18 一起使用：

    @use '@angular/material' as mat;

@include mat.core();

$my-app-primary: mat.define-palette(mat.$indigo-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-app-warn: mat.define-palette(mat.$red-palette);

$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);

    主要变化及说明：

    1. 我们用来@use '@angular/material' as mat;导入 Material 样式并为其分配命名空间mat。

    2. 调色板定义mat.define-palette()通过 使用和访问预定义的调色板mat.$color-palette。

    3. 对于强调调色板，我使用了标准的 Material Design 推荐的强调色（A200、A100、A400）。您可以根据需要进行调整。

    4. 主题使用mat.define-light-theme()对象结构来定义，以提高可读性和未来的可扩展性。

    5. 最后，我们将所有组件主题都包含在内mat.all-component-themes($my-app-theme)。

    其他注意事项：

    • 如果您使用自定义颜色，则可能需要定义自定义调色板。例如：

      $custom-primary: (
  50: #e8eaf6,
  100: #c5cae9,
  // ... other shades
  500: #3f51b5,  // main shade
  // ... continue with other shades
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    // ... other contrasts
  )
);
$my-app-primary: mat.define-palette($custom-primary);
    • 0

相关问题