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

Question

我目前正在将俱乐部应用程序从 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);

这可以在colors.scss中找到，它在我们旧应用程序的styles.scss中引用。我想保持所有内容完好无损，但从 Angular 17 开始，不再可能使用

@import

，我应该使用

@use

（就像这张票中的那样：https://github.com/angular/组件/问题/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

提前非常感谢您。

Answer 1

您的 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);
}