首页 新闻 会员 周边 捐助

angular 12 升级 19 后无法 import '@angular/material/theming' 的问题

0
悬赏园豆：30 [已解决问题] 解决于 2024-12-18 21:19

使用 angular 12 时，src/styles/_variables.scss 中有下面的语句

@forward '@angular/material/theming';
@use '@angular/material' as mat;

升级到 angular 19 后 build 时第1行语句报错

[ERROR] Can't find stylesheet to import.
  ╷
1 │ @forward '@angular/material/theming';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\_variables.scss 1:1  @import
  src\styles\styles.scss 2:9      root stylesheet [plugin angular-sass]

    angular:styles/global:styles:2:8:
      2 │ @import 'src/styles/styles.scss';

请问如何解决这个问题？

问题补充：

看了一下 angular 12 的 @angular/material/_theming.scss 文件内容，都是 forward 到 cdk 的语句

@forward '../cdk/a11y/index.import';
@forward '../cdk/overlay/index.import';
@forward '../cdk/text-field/index.import';
// ...

如果去掉 @forward '@angular/material/theming';，build 时会报下面的错误

 [ERROR] Undefined function.
   ╷
70 │ $app-primary: mat.define-palette($app-primary-pattern);
   │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
dudu的主页 dudu | 高人七级 | 园豆：29642
提问于：2024-12-18 18:25

与这个 issue 是同样的问题 https://github.com/wallabyjs/public/issues/3156

 – dudu 3天前
< >
分享
最佳答案
0

可以删除 forward 语句

@forward '@angular/material/theming';

删除之后还需要修改 material 相关的 scss 代码：

  • mat.define-palette 改为 mat.m2-define-palette
  • mat.$red-palette 改为 mat.$m2-red-palette
  • mat.get-color-from-palette 改为 mat.m2-get-color-from-palette
  • mat.get-color-from-palette 改为 mat.m2-get-color-from-palette
  • mat.$green-palette) 改为 mat.$m2-green-palette
  • mat.define-typography-config 改为 mat.m2-define-typography-config
  • @include mat.core($app-typography) 改为：
@include mat.core();
include mat.typography-hierarchy($app-typography);
dudu | 高人七级 |园豆：29642 | 2024-12-18 21:19
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。