npm 将Angular 更新为v15后的SassError

rvpgvaaj 于 2023-03-08 发布在 Angular

关注(0)|答案(1)|浏览(178)

我正在将Angular 从v14更新到v15。我已经执行了命令“ng update @angular/core@15@angular/cli@15”和“ng update @angular/material@15”。
尝试启动应用程序时，我得到这个错误：

ERROR in ./src/app/shared/components/warning-dialog/warning-dialog.component.scss?ngResource
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Only 0 arguments allowed, but 1 was passed.
  ┌──> src/styles/theme.scss
177│ @include mat.core($regular-font);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
  ╵
  ┌──> node_modules/@angular/material/core/_core.scss
8 │ @mixin core() {
  │        ━━━━━━ declaration
  ╵
  src/styles/theme.scss 177:1                                                 core()
  src/styles/theme.scss 177:1                                                 @import
  src/app/shared/components/warning-dialog/warning-dialog.component.scss 1:9  root stylesheet
 @ ./src/app/shared/components/warning-dialog/warning-dialog.component.ts 11:0-78 40:17-37
 @ ./src/app/shared/shared.module.ts 73:0-94 112:4-26
 @ ./src/app/app.module.ts 37:0-54 74:12-32
 @ ./src/main.ts 3:0-45 9:41-50

这是我的主题。

> 
> @use '~@angular/material' as mat;
> 
> $mat-theme-ignore-duplication-warnings: true;
> 
> $color-xxx-accent1-shade2: #ffea99; $color-xxx-accent5-shade2:
> #8ba68a; $color-xxx-accent6-shade1: #B21014; $color-xxx-basic3-shade2: #c2c2c2;
> 
> 
> 
> 
> 
> 
> /*  Color Theme */ $xxx-normal-palette: (   50 :  #FFFFFF, 
> // color-xxx-basic5   100 : #E9EBF1,  // color-xxx-highlight-shade3  
> 200 : #D2DAE3,  // color-xxx-highlight-shade2   300 : #BDC6D6,  //
> color-xxx-highlight-shade1   400 : #92A2BD,  // color-xxx-highlight  
> 500 : #6c7c97,  // color-xxx-form-button-main-dark   600 : #ACBCD7, 
> // color-xxx-form-button-main-light   700 : #7C89A1,  //
> color-xxx-form-button-shade1   800 : #526482,  //
> color-xxx-form-button-shade2   900 : #000000,  // color-xxx-form-text 
> A100 : #444444, // color-xxx-basic4   A200 : #666666, //
> color-xxx-basic3   A400 : #EEEFEA, // color-xxx-basic2   A700 :
> #AAA38E, // color-xxx-basic1   contrast: (
>       50 :  #000000,
>       100 : #000000,
>       200 : #000000,
>       300 : #000000,
>       400 : #000000,
>       500 : #000000,
>       600 : #000000,
>       700 : #000000,
>       800 : #000000,
>       900 : #000000,
>       A100 : #000000,
>       A200 : #000000,
>       A400 : #000000,
>       A700 : #000000,   ) );
> 
> $xxx-normal-palette-accent: (   50 :  #FFF5CC,  //
> color-xxx-accent1-shade3   100 : #FFEA99,  // color-xxx-accent1-shade2
> 200 : #FDDF66,  // color-xxx-accent1-shade1   300 : #FECB00,  //
> color-xxx-accent1   400 : #FF9100,  // color-xxx-form-border-accent  
> 500 : #ffad1f,  // color-xxx-signal3   600 : #E5E3DD,  //
> color-xxx-basic1-shade3   700 : #D4D1C6,  // color-xxx-basic1-shade2  
> 800 : #C3BEB0,  // color-xxx-basic1-shade1   900 : #F6F6F6,  //
> color-xxx-table-shade   A100 : #E0E0E0, // color-xxx-basic3-shade3  
> A200 : #C2C2C2, // color-xxx-basic3-shade2   A400 : #A3A3A3, //
> color-xxx-basic3-shade1   A700 : #666666, // color-xxx-basic3  
> contrast: (
>       50 :  #000000,
>       100 : #000000,
>       200 : #000000,
>       300 : #000000,
>       400 : #000000,
>       500 : #000000,
>       600 : #000000,
>       700 : #000000,
>       800 : #000000,
>       900 : #000000,
>       A100 : #000000,
>       A200 : #000000,
>       A400 : #000000,
>       A700 : #000000,   ) );
> 
> $xxx-normal-palette-warn: (   50 :  #ECEECC,  //
> color-xxx-accent3-shade3   100 : #DADE99,  // color-xxx-accent3-shade2
> 200 : #C7CE66,  // color-xxx-accent3-shade1   300 : #A2AD00,  //
> color-xxx-accent3   400 : #3db014,  // color-xxx-signal2   500 :
> #d20000,  // color-xxx-signal1   600 : #DADADA,  // color-xxx-accent2-shade3   700 : #B4B4B4,  // color-xxx-accent2-shade2
> 800 : #8F8F8F,  // color-xxx-accent2-shade1   900 : #D26666,  //
> color-xxx-accent2   A100 : #EFEFEF, // color-xxx-form-button   A200 :
> #D9D9D9, // color-xxx-form-field   A400 : #999999, // color-xxx-form-border   A700 : #000000, // color-xxx-form-text  
> contrast: (
>       50 :  #000000,
>       100 : #000000,
>       200 : #000000,
>       300 : #000000,
>       400 : #000000,
>       500 : #000000,
>       600 : #000000,
>       700 : #000000,
>       800 : #000000,
>       900 : #000000,
>       A100 : #000000,
>       A200 : #000000,
>       A400 : #000000,
>       A700 : #000000,   ) );
> 
> $xxx-primary: mat.define-palette($xxx-normal-palette);
> $xxx-accent: mat.define-palette($xxx-normal-palette-accent);
> $xxx-warn: mat.define-palette($xxx-normal-palette-warn);
> 
> $xxx-theme: mat.define-light-theme($xxx-primary,
> $xxx-accent, $xxx-warn);
> 
> @include mat.all-component-themes($xxx-theme);
> 
> /* xxx Typography */ @font-face {   font-family: "xxxGroup_Cond_Bold";
> src: url('assets/fonts/xxxGroup_Cond_Bold.ttf') format("truetype");  
> font-style: normal;   font-weight: normal; }
> 
> @font-face {   font-family: "xxxGroup_Cond_Regular";   src:
> url('assets/fonts/xxxGroup_Cond_Regular.ttf') format("truetype");  
> font-style: normal;   font-weight: bold; }
> 
> $xxx-bold-font: mat.define-legacy-typography-config(   $font-family:  
> 'Group_Cond_Bold',   $headline:         
> mat.define-typography-level(18px, 32px, 700),   $title:            
> mat.define-typography-level(20px, 32px, 700) );
> 
> $xxx-regular-font: mat.define-legacy-typography-config(  
> $font-family:       'Group_Cond_Regular',   $display-4:        
> mat.define-typography-level(112px, 112px, 300),   $display-3:        
> mat.define-typography-level(56px, 56px, 400),   $display-2:        
> mat.define-typography-level(45px, 48px, 400),   $display-1:        
> mat.define-typography-level(34px, 40px, 400),   $subheading-2:     
> mat.define-typography-level(16px, 28px, 400),   $subheading-1:     
> mat.define-typography-level(16px, 24px, 400),   $body-2:           
> mat.define-typography-level(14px, 24px, 500),   $body-1:           
> mat.define-typography-level(14px, 20px, 400),   $caption:          
> mat.define-typography-level(12px, 20px, 400),   $button:           
> mat.define-typography-level(14px, 14px, 500),   $input:            
> mat.define-typography-level(inherit, 1.125, 400) );
> 
> /* Font sizes */ $font-size-large-18:  18px; $font-size-large-24: 
> 24px; $font-size-normal-12: 12px; $font-size-normal-16: 16px;
> $font-size-small-10:  10px; $font-size-small-8:   8px;
> 
> /* Font weights */ $font-weight-bold:    700; $font-weight-normal: 
> 400; $font-weight-thin:    300;
> 
> @include mat.typography-hierarchy($xxx-regular-font);
> 
> @include mat.all-component-typographies($xxx-regular-font);
> 
> /* Be sure that you only ever include this mixin once! */ @include
> mat.core($xxx-regular-font);
> 
> 
> /* Button colours */ .mat-button, .mat-button-toggle,
> .mat-raised-button {   &.mat-raised-button:hover {
>     background-color: mat.get-color-from-palette($xxx-accent, 700);    }   &.mat-primary:not(:hover) {
>     background-color: mat.get-color-from-palette($xxx-primary, 400);
>     color: mat.get-color-from-palette($xxx-primary, 50);   }   &.mat-primary:hover {
>     background-color: mat.get-color-from-palette($xxx-primary, 500);
>     color: mat.get-color-from-palette($xxx-primary, 50);   }   &.mat-primary[disabled] {
>     background-color: mat.get-color-from-palette($bxxx-primary, 300);
>     color: mat.get-color-from-palette($xxx-primary, 100);   } }

我已经删除了node_modules和package-lock，然后重新安装了一遍。但是没有用。
我还删除了材料，并再次安装了v14。这样就没有错误。然后我更新到v15，又有错误了。
那么，我必须适应材料的变化吗？但是什么，以及如何适应？
我将非常感谢任何帮助！我一直在寻找解决方案，但还没有成功。

npm

来源：https://stackoverflow.com/questions/75670584/sasserror-after-update-angular-to-v15

1条答案

按热度按时间

ijnw1ujt1#

随着@angular/material迁移到MDC，define-typography-config的定义在V15中发生了变化。
前一个现在在define-legacy-typography-config下。
所以你有两个选择：

您使用define-legacy-typography-config
移动到新的define-typography-config，其定义如下：

@function define-legacy-typography-config(
  $font-family:   'Roboto, "Helvetica Neue", sans-serif',
  $display-4:     define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $display-3:     define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $display-2:     define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $display-1:     define-typography-level(34px, 40px, 400),
  $headline:      define-typography-level(24px, 32px, 400),
  $title:         define-typography-level(20px, 32px, 500),
  $subheading-2:  define-typography-level(16px, 28px, 400),
  $subheading-1:  define-typography-level(15px, 24px, 400),
  $body-2:        define-typography-level(14px, 24px, 500),
  $body-1:        define-typography-level(14px, 20px, 400),
  $caption:       define-typography-level(12px, 20px, 400),
  $button:        define-typography-level(14px, 14px, 500),
  // Line-height must be unit-less fraction of the font-size.
  $input:         define-typography-level(inherit, 1.125, 400)

编辑：
您应该将排版直接传递给主题：

$theme: (
    color: (
        primary: $primary,
        accent: $accent,
        warn: $warn,
    ),
    typography: $xxx-regular-font,
    density: 0,
);

材料定义光主题（$theme），

赞(0）回复(0）举报 2023-03-08

我来回答

npm 将Angular 更新为v15后的SassError

1条答案

相关问题

热门标签

最新问答