Angular Material 12 自定义主题

Question

在新的角度项目中，如果我添加具有自定义主题的角度材质，我会收到以下错误：

./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+click @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';仍然相同的错误。

Answer 1

mat-core mixin 负责添加不依赖于主题的高程、波纹、覆盖等样式。

在编译为 CSS 之前，它已经包含在预构建的主题文件中，因此这就是为什么您在当前的 styles.scss 中无法使用它。如果您选择构建自定义主题而不是使用预构建的靛蓝-粉红色主题，那么您需要包含它。