Question

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

./ src / styles.css （./node_modules/raw-loader!./node_modules/postcss-loader/lib？嵌入！./ 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

Answer 1

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

执行以下步骤：

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

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

在theme.scss文件夹中创建文件src。
在根文件夹中打开文件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

Answer 2

我能够通过卸载当前的nodejs并安装最新版本8.11.3来解决此问题，并且一切正常。从@ Und3rTow发布的链接中得知，我不再需要导入styles.css。另外，我不再使用angular.json @ pardeep-jain中的输入。谢谢你们

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

2 个答案: