Angular Material 12 自定义主题

Question

在一个新的 Angular 项目中，如果我添加了自定义主题的 Angular Material，则会出现以下错误：

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mat": expected 1 selector or at-rule, was ".core();"
        on line 2 of src/styles.scss
>> @include mat.core();

我正在使用

Angular CLI: 12.0.5
Node: 14.17.1
Package Manager: npm 7.18.1
OS: win32 x64

Angular: 12.0.5

有什么想法导致这个错误吗？如果我尝试使用ctrl + 点击@use '~@angular/material' as mat;，它不起作用。

重现方式： - ng new project - cd project - ng add @angular/material <- 选择sass和自定义主题 - ng serve 我尝试运行npm uninstall node-sass，但似乎没有帮助。 当我运行ng serve时，仍然会出现node-sass警告，并且我收到完全相同的消息。

我尝试使用@import '~@angular/material/theming';，仍然出现相同的错误。

- G.T.

Answer 1

在 Angular 13 中，尝试使用路径中没有波浪符号 ~ 的方式来使用 @use '@angular/material' as mat;，而不是 ~@use '@angular/material' as mat;。

- Igor Kurkov

---

这是一个重要的提示，我不得不进行修复。遇到了包含mat-core()的问题。想知道它是否有不同的导入位置或被重命名了？ - Winnemucca

Answer 2

您可以通过彻底删除node sass来解决这个问题。

npm uninstall node-sass

祝福您，

- ArtixModernal

---

很不幸，它还是无法工作。我运行了命令，但没有帮助。我尝试重新安装node，清除缓存，但似乎都没有帮助。当我运行ng serve时，我仍然收到使用node-sass的警告。 - G.T.

Answer 3

mat-core mixin负责添加与主题无关的高度、涟漪、叠加等样式。

在编译为CSS之前，它已经被包含在预构建的主题文件中，因此您在当前的styles.scss中无法使用它。如果您选择构建自定义主题而不是使用预构建的indigo-pink主题，则需要将其包含在内。

- Hamada

---

尝试过了，不起作用。我甚至重新安装了 Node 来确保，但仍然没有任何进展。 - G.T.

我得到了以下错误信息： ModuleBuildError: 模块构建失败（来自./node_modules/sass-loader/dist/cjs.js）： SassError：没有名为mat-core的mixin 在src/styles.scss的第5行

@include mat-core();

- G.T.

这个可以帮助：https://dev59.com/1ek5XIcBkEYKwwoY2NLu - Hamada

请参阅 StackBlitz 演示以获取 v12 的样式表。链接：https://stackblitz.com/edit/angular-custom-theme-vyyqx3?file=src%2Fstyles.scss - Hamada

让我们在聊天中继续这个讨论。 - G.T.