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

【问题标题】：Error importing angular material 6 custom theme in styles.css在styles.css中导入角度材料6自定义主题时出错
【发布时间】：2018-12-07 11:16:24
【问题描述】：

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

./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css) 模块构建失败：错误：无法解析“@angular/material/theming” 在 '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);

这里是styles.css的代码：

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

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

【问题讨论】：

为什么你在 angular.JSON 文件中input 导入文件？
见here

标签： angular postcss-import css-import angular-material-6

【解决方案1】：

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

按照以下步骤操作：

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

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

在src 文件夹中创建一个文件theme.scss。
在您的根文件夹中打开文件angular.json（或angular-cli.json）

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

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

重启应用。

更多链接：

Theming Guideline from material.angular.io

【讨论】：

【解决方案2】：

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

【讨论】：