0

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

./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css) 模块构建失败:错误:无法解析'@angular 'C:\Users\D3L1ghT\Documents\PROJECTS\social-network\techhub\src' 中的 /material/theming'

这是我的 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

4

2 回答 2

2

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

按着这些次序:

  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数组中:

    "projects": {
      "your-app": {
        ...
        "architect": {
          "build": {
            ...
            "options": {
              ...
              "styles": [
                "src/styles.css",
                "src/theme.scss"
              ],
            },
          },
        },
      },
    }
    
  5. 重新启动应用程序。

更多链接:

于 2018-07-14T11:11:53.147 回答
0

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

于 2018-07-01T23:18:07.100 回答