在styles.css中导入角材料6自定义主题时出错

Question

我使用角材质6创建了一个自定义主题。当我在styles.css中导入主题时，会得到以下错误：

./src/peneses.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)模块构建失败:错误:无法在'C:\Users\D3L1ghT\Documents\PROJECTS\social-network\techhub\src‘中解析“角/料/主题”

这是我的-主题代码。

@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);

下面是styles.css的代码：

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

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

Answer 1

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

遵循以下步骤：

1. (可选)删除src/styles.css文件中的默认主题： @import '~@angular/material/prebuilt-themes/the-default-theme.css'；
2. 在theme.scss文件夹中创建一个文件src。
3. 打开根文件夹中的文件angular.json (或angular-cli.json)
4. 将主题"src/theme.scss"添加到styles数组中： “项目”：{“你的应用程序”：{.“建筑师”：{“建筑”：{.“选项”：{.“样式”：“src/styes.css”、“src/teme.scss”、}
5. 重新启动应用程序。

进一步链接：

• material.angular.io的主题指南

Answer 2

我能够通过卸载当前的nodejs并安装最新的8.11.3版本来解决这个问题，一切都很顺利。从@Und3rTow发布的链接中学到的信息，我不再需要在styles.css中导入。另外，我不再使用angular.json @Par深处-jain中的输入。谢谢各位