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

英文:

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

无法解决 Spring Boot 和 Angular 的 CORS 问题。

NPM：在安装依赖于一个本地 tgz 包的模块时找不到包。

使用Angular和Spring Boot从本地主机获取数据

Angular HttpClient的fetch保持活动标志的类似功能

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 在上下文菜单中以大文本形式打开

发表评论