英文:
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
-
你可以按照我列出的顺序尝试以下命令,然后再进行下一步。有时候,当你改变你的Angular版本时,你可能会遇到许多不同的"node_modules"错误变化。
-
npm install --save-dev webpack
-
npm link webpack
-
npm cache clean --force
上面的截图是我曾经遇到的错误的一个示例,老实说,我不知道它们为什么会突然出现。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论