在样式中导入角度材质 6 自定义主题时出错.css

Question

我使用 Angular Material 6 创建了一个自定义主题。当我以样式导入主题时.css出现错误：

./src/styles.css (./node_modules/raw-loader！./node_modules/postcss-loader/lib？？嵌入式！。/src/styles.css( 模块构建失败：错误：无法解决"@angular/材料/主题" 在 'C：\Users\D3L1ghT\Documents\PROJECTS\social-network\techhub\src' 中

这是我的my-theme.scss代码：

@import "~@angular/material/theming";
@include mat-core();
$my-theme-primary: mat-palette($mat-custom-blue, 400);
$my-theme-accent: mat-palette($mat-custom-blue, A100, A100, A400);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent);
$primary-color: map_get($my-theme-primary, 400);
$secondary-color: map_get($my-theme-accent, 500);
@include angular-material-theme($my-theme);

以下是样式的代码.css：

/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
@import url("./my-theme.scss");

这是angular.json的屏幕截图：angular.json

Answer 1

您不应该将theme.scss文件添加到 css 文件中。

请按照以下步骤操作：

1. (可选(删除文件src/styles.css中的默认主题：

   @import '~@angular/material/prebuilt-themes/the-default-theme.css';
   

2. 在文件夹中创建文件theme.scsssrc。

3. 在根文件夹中打开文件angular.json(或angular-cli.json(

4. 将主题"src/theme.scss"添加到styles数组中：

   "projects": {
   "your-app": {
   ...
   "architect": {
   "build": {
   ...
   "options": {
   ...
   "styles": [
   "src/styles.css",
   "src/theme.scss"
   ],
   },
   },
   },
   },
   }
   

5. 重新启动应用。

更多链接：

• material.angular.io 主题指南

Answer 2

我能够通过卸载当前的nodejs并安装最新版本8.11.3来解决此问题，并且一切正常。我不必导入样式.css从@Und3rTow发布的链接中了解到的那样。此外，我不再使用angular.json@pardeep-jain中的输入。谢谢大家