2023年3月8日 16:05:03go评论147阅读模式

英文:

SassError after Update Angular to v15

问题

> 我正在将我的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.
  ┌──&gt; src/styles/theme.scss
177│ @include mat.core($regular-font);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
  ╵
  ┌──&gt; 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

这是我的theme.scss


&gt; 
&gt; @use '～@angular/material' as mat;
&gt; 
&gt; $mat-theme-ignore-duplication-warnings: true;
&gt; 
&gt; $color-xxx-accent1-shade2: #ffea99; $color-xxx-accent5-shade2:
&gt; #8ba68a; $color-xxx-accent6-shade1: #B21014; $color-xxx-basic3-shade2: #c2c2c2;
&gt; 
&gt; 
&gt; 
&gt; 
&gt; 
&gt; 
&gt; /*  Color Theme */ $xxx-normal-palette: (   50 :  #FFFFFF, 
&gt; // color-xxx-basic5   100 : #E9EBF1,  // color-xxx-highlight-shade3  
&gt; 200 : #D2DAE3,  // color-xxx-highlight-shade2   300 : #BDC6D6,  //
&gt; color-xxx-highlight-shade1   400 : #92A2BD,  // color-xxx-highlight  
&gt; 500 : #6c7c97,  // color-xxx-form-button-main-dark   600 : #ACBCD7, 
&gt; // color-xxx-form-button-main-light   700 : #7C89A1,  //
&gt; color-xxx-form-button-shade1   800 : #526482,  //
&gt; color-xxx-form-button-shade2   900 : #000000,  // color-xxx-form-text 
&gt; A100 : #444444, // color-xxx-basic4   A200 : #666666, //
&gt; color-xxx-basic3   A400 : #EEEFEA, // color-xxx-basic2   A700 :
&gt; #AAA38E, // color-xxx-basic1   contrast: (
&gt;       50 :  #000000,
&gt;       100 : #000000,
&gt;       200 : #000000,
&gt;       300 : #000000,
&gt;       400 : #000000,
&gt;       500 : #000000,
&gt;       600 : #000000,
&gt;       700 : #000000,
&gt;       800 : #000000,
&gt;       900 : #000000,
&gt;       A100 : #000000,
&gt;       A200 : #000000,
&gt;       A400 : #000000,
&gt;       A700 : #000000,   ) );
&gt; 
&gt; $xxx-normal-palette-accent: (   50 :  #FFF5CC,  //
&gt; color-xxx-accent1-shade3   100 : #FFEA99,  // color-xxx-accent1-shade2
&gt; 200 : #FDDF66,  // color-xxx-accent1-shade1   300 : #FECB00,  //
&gt; color-xxx-accent1   400 : #FF9100,  // color-xxx-form-border-accent  
&gt; 500 : #ffad1f,  // color-xxx-signal3   600 : #E5E3DD,  //
&gt; color-xxx-basic1-shade3   700 : #D4D1C6,  // color-xxx-basic1-shade2  
&gt; 800 : #C3BEB0,  // color-xxx-basic1-shade1   900 : #F6F6F6,  //
&gt; color-xxx-table-shade   A100 : #E0E0E0, // color-xxx-basic3-shade3  
&gt; A200 : #C2C2C2, // color-xxx-basic3-shade2   A400 : #A3A3A3, //
&gt; color-xxx-basic3-shade1   A700 : #666666, // color-xxx-basic3  
&gt; contrast: (
&gt;       50 :  #000000,
&gt;       100 : #000000,
&gt;       200 : #000000,
&gt;       300 : #000000,
&gt;       400 : #000000,
&gt;       500 : #000000,
&gt;       600 : #000000,
&gt;       700 : #000000,
&gt;       800 : #000000,
&gt;       900 : #000000,
&gt;       A100 : #000000,
&gt;       A200 : #000000,
&gt;       A400 : #000000,
&gt;       A700 : #000000,   ) );
&gt; 
&gt; $xxx-normal-palette-warn: (   50 :  #ECEECC,  //
&gt; color-xxx-accent3-shade3   100 : #DADE99,  // color-xxx-accent3-shade2
&gt; 200 : #C7CE66,  // color-xxx-accent3-shade1   300 : #A2AD00,  //
&gt; color-xxx-accent3   400 : #3db014,  // color-xxx-signal2   500 :
&gt; #d20000,  // color-xxx-signal1   600 : #DADADA,  // color-xxx-accent2-shade3   700 : #B4B4B4,  // color-xxx-accent2-shade2
&gt; 800 : #8

<details>
<summary>英文:</summary>

&gt; I&#39;m updating my Angular from v14 to v15. I already executed the commands &#39;ng update @angular/core@15 @angular/cli@15&#39; and &#39;ng update @angular/material@15&#39;.

When trying to start the application I get this Error:

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


This is my theme.scss

>
> @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); } }


I already deleted node_modules and package-lock and installed it again. But it didn&#39;t help.

I also deleted material and installed v14 again. With that there was no error. Then I updated it to v15, and there was the Error again. 

So is there a change in material that I have to adapt? But what, and how?

I would be so thankful for any help! I&#39;m searching so long for solution, but wasn&#39;t successful yet.





</details>


# 答案1
**得分**: 2

`define-typography-config` 在 V15 中由于迁移到 `@angular/material` 的 MDC 发生了变化。

之前的定义现在在 `define-legacy-typography-config` 下。

因此，你有两个选择：

* 使用 `define-legacy-typography-config`
* 迁移到新的 `define-typography-config`，其定义如下：

```scss
@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),
  // 行高必须是字体大小的无单位分数。
  $input:         define-typography-level(inherit, 1.125, 400)
);

编辑：

你应该直接将排版传递给主题：

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

mat.define-light-theme($theme);

英文:

The definition of define-typography-config has changed in V15 with the migration to MDC for @angular/material.

The previous one is now under define-legacy-typography-config.

So you have 2 choices :

You use define-legacy-typography-config
You move to the new define-typography-config which is defined like following :

@function define-legacy-typography-config(
  $font-family:   &#39;Roboto, &quot;Helvetica Neue&quot;, sans-serif&#39;,
  $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)

Edit:

You should pass the typography to the theme directly :

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

mat.define-light-theme($theme),

答案2

得分: 0

我知道了！

将你的 mat.define-typography-config 更改为 mat.define-legacy-typography-config

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

并且将 @include mat.core($regular-font) 更改为 @include mat.typography--hierarchy($regular-font)

@include mat.typography-hierarchy($regular-font);

谢谢提醒！

英文:

I got it!

Change your mat.define-typography-config to mat.define-legacy-typography-config

$regular-font: mat.define-legacy-typography-config(
  $font-family:       &#39;Group_Cond_Bold&#39;,
  $headline:          mat.define-typography-level(18px, 32px, 700),
  $title:             mat.define-typography-level(20px, 32px, 700)
);

And the @include mat.core($regular-font) to @include mat.typography--hierarchy($regular-font)

@include mat.typography-hierarchy($regular-font);

Thanks for the hints!

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Sass更新到Angular v15后出现的错误

问题

答案2

Angular的属性绑定让我疯狂。

Angular Material 表格不允许为列禁用拖放标志。

在Firebase上部署Angular Universal应用程序与Angular Fire存在问题。

Ionic App is not displaying content but tabs still show.

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论