Angular v15,没有名为 $title 或 $input 的参数。

huangapple go评论60阅读模式
英文:

Angular v15, no arguments named $title or $input

问题

I'm doing the following and trying to follow as good as possible the angular documentation but I'm facing the following error

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: No arguments named $title or $input.
    ┌──> src\sass\core.scss
44     $typography: mat.define-typography-config(
     ┌──────────────^
45      $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
46      $title: mat-typography-level(20px, 32px, 600),
47      $body-2: mat-typography-level(14px, 24px, 600),
48      $button: mat-typography-level(14px, 14px, 600),
49      $input: mat-typography-level(16px, 1.125, 400),
50    );
     └─^ invocation

This is my css

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

@include mat-core();

$app-primary: mat.define-palette(mat.$light-blue-palette, 700, 200, 400);
$app-accent: mat.define-palette(mat.$light-blue-palette, A700, A200, A400);
$app-warn: mat.define-palette(mat.$red-palette);

$app-typography: mat.define-typography-config(
  $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
);

$app-theme: mat.define-light-theme(
  (
    color: (
      $app-primary,
      $app-accent,
      $app-warn,
    ),
    typography: $app-typography,
  )
);

@include mat.all-component-themes($app-theme);

Am I missing something?

Edit

I've changed the mat-core() to mat.core() thanks to the @O-9 comment

But that did create further error.

./src/sass/main.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $map: (50: #e1f5fe, 100: #b3e5fc, 200: #81d4fa, 300: #4fc3f7,
// ...
, "contrast-contrast": null) is not a map.
    
197      $primary: map.get($color-settings, primary);
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    
  node_modules\@angular\material\core\theming\_theming.scss 197:15  define-light-theme()
  src\sass\core.scss 14:13                                          @import
  src\sass\main.scss 10:9                                           root stylesheet

I'm still lost here '^^

英文:

I'm doing the following and trying to follow as good as possible the angular documentation but I'm facing the following error

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: No arguments named $title or $input.
    ┌──> src\sass\core.scss
44  │   $typography: mat.define-typography-config(
    │ ┌──────────────^
45  │ │   $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
46  │ │   $title: mat-typography-level(20px, 32px, 600),
47  │ │   $body-2: mat-typography-level(14px, 24px, 600),
48  │ │   $button: mat-typography-level(14px, 14px, 600),
49  │ │   $input: mat-typography-level(16px, 1.125, 400),
50  │ │ );
    │ └─^ invocation

This is my css

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

@include mat-core();

$app-primary: mat.define-palette(mat.$light-blue-palette, 700, 200, 400);
$app-accent: mat.define-palette(mat.$light-blue-palette, A700, A200, A400);
$app-warn: mat.define-palette(mat.$red-palette);

$app-typography: mat.define-typography-config(
  $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
);

$app-theme: mat.define-light-theme(
  (
    color: (
      $app-primary,
      $app-accent,
      $app-warn,
    ),
    typography: $app-typography,
  )
);

@include mat.all-component-themes($app-theme);

Am I missing something ?

Edit

I've changed the mat-core() to mat.core() thx to the @O-9 comment

But that did create further error.

./src/sass/main.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $map: (50: #e1f5fe, 100: #b3e5fc, 200: #81d4fa, 300: #4fc3f7, 
// ...
, "contrast-contrast": null) is not a map.
    ╷
197 │     $primary: map.get($color-settings, primary);
    │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\@angular\material\core\theming\_theming.scss 197:15  define-light-theme()
  src\sass\core.scss 14:13                                          @import
  src\sass\main.scss 10:9                                           root stylesheet

I'm still lost here '^^

答案1

得分: 2

问题在于你的传统排版配置中包含了"title"和"input"的规范,但这两者在 Angular 15 中不再受支持。只需删除这两个条目,就应该没问题了。受支持的条目的完整列表如下:

  • $font-family
  • $headline-1
  • $headline-2
  • $headline-3
  • $headline-4
  • $headline-5
  • $headline-6
  • $subtitle-1
  • $subtitle-2
  • $body-1
  • $body-2
  • $caption
  • $button
  • $overline
英文:

The problem is that your legacy typography config contains specifications for "title" and "input" but those 2 are no longer supported by Angular 15. Just take out those 2 entries and it should be fine. The full list of supported entries is:

  $font-family
  $headline-1
  $headline-2
  $headline-3
  $headline-4
  $headline-5
  $headline-6
  $subtitle-1
  $subtitle-2
  $body-1,
  $body-2
  $caption
  $button
  $overline

答案2

得分: 0

  1. 你可以按照我列出的顺序尝试以下命令,然后再进行下一步。有时候,当你改变你的Angular版本时,你可能会遇到许多不同的"node_modules"错误变化。

  2. npm install --save-dev webpack

  3. npm link webpack

  4. npm cache clean --force

上面的截图是我曾经遇到的错误的一个示例,老实说,我不知道它们为什么会突然出现。

英文:

Angular v15,没有名为 $title 或 $input 的参数。You can try the following commands in the order I have listed them before going to the next one. At times you may encounter many variations of node_modules errors whenever you change your angular version

1.npm install --save-dev webpack

2.npm link webpack

3.npm cache clean --force

The screenshot above is an example of the errors that I used to face and I honestly don't know how they just pop out of the blue like that.

答案3

得分: 0

Temporary workaround

我能够通过以下方法使其工作。

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

@include mat.core();

$app-primary: mat.define-palette(mat.$blue-palette, 700, 200, 400);
$app-accent: mat.define-palette(mat.$blue-palette, A700, A200, A400);
$app-warn: mat.define-palette(mat.$red-palette);

$app-theme: mat.define-light-theme($app-primary, $app-accent, $app-warn);

@include angular-material-theme($app-theme);

这对我来说看起来不正确,所以如果有人找到更好的解决方案,我将很乐意删除这个答案。

英文:

Temporary workaround

I could manage to make it work doing the following.

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

@include mat.core();

$app-primary: mat.define-palette(mat.$blue-palette, 700, 200, 400);
$app-accent: mat.define-palette(mat.$blue-palette, A700, A200, A400);
$app-warn: mat.define-palette(mat.$red-palette);

$app-theme: mat.define-light-theme($app-primary, $app-accent, $app-warn);

@include angular-material-theme($app-theme);

It does looks incorrect to me, so if anybody find a better solution, I'll be glad to remove this answer.

huangapple
  • 本文由 发表于 2023年2月6日 20:24:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/75361283.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定