自定义主题模块无法解决

Question

我很想开始为使用 Angular Material 2 的 Angular 5 应用程序创建自定义主题应用程序。按照说明，我将 src/diabetes-chart-theme.scss 添加到 styles 键中的 .angular-cli.json .但是当我编译时，我得到Module not found: Error: Can't resolve '@angular/material/prebuilt-themes/diabetes-chart-theme.css' in '/home/one/github/diabetes-charts/src'。

我猜 scss 没有编译成功，所以编译后的 css 文件不存在。

有什么想法吗？错误输出非常嘈杂，因为它抱怨缺少 node_modules（如果我不使用自定义主题则没有问题）。

.angular-cli.json

  "styles": [
    "styles.css",
    "diabetes-chart-theme.scss"
  ],

---

src/diabetes-chart-theme.scss

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();

// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the default theme styles.
@include angular-material-theme($candy-app-theme);


// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

---

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
Module not found: Error: Can't resolve '@angular/material/prebuilt-themes/diabetes-chart-theme.css' in '/home/one/github/diabetes-charts/src'
resolve '@angular/material/prebuilt-themes/diabetes-chart-theme.css' in '/home/one/github/diabetes-charts/src'
  Parsed request is a module
  using description file: /home/one/github/diabetes-charts/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/one/github/diabetes-charts/package.json (relative path: ./src)
    resolve as module
      /home/one/github/diabetes-charts/src/node_modules doesn't exist or is not a directory
      /home/one/github/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /home/one/github/diabetes-charts/node_modules
        using description file: /home/one/github/diabetes-charts/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /home/one/github/diabetes-charts/package.json (relative path: ./node_modules)
          using description file: /home/one/github/diabetes-charts/node_modules/@angular/material/package.json (relative path: ./prebuilt-themes/diabetes-chart-theme.css)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.js doesn't exist
            as directory
              /home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css doesn't exist
      looking for modules in /home/one/node_modules
        using description file: /home/one/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /home/one/package.json (relative path: ./node_modules)
          using description file: /home/one/package.json (relative path: ./node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.js doesn't exist
            as directory
              /home/one/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css doesn't exist
      looking for modules in /home/one/github/diabetes-charts/node_modules
        using description file: /home/one/github/diabetes-charts/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /home/one/github/diabetes-charts/package.json (relative path: ./node_modules)
          using description file: /home/one/github/diabetes-charts/node_modules/@angular/material/package.json (relative path: ./prebuilt-themes/diabetes-chart-theme.css)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.js doesn't exist
            as directory
              /home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css doesn't exist
      looking for modules in /home/one/github/diabetes-charts/src
        using description file: /home/one/github/diabetes-charts/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /home/one/github/diabetes-charts/package.json (relative path: ./src)
          using description file: /home/one/github/diabetes-charts/package.json (relative path: ./src/@angular/material/prebuilt-themes/diabetes-chart-theme.css)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css.js doesn't exist
            as directory
              /home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css doesn't exist
      looking for modules in /home/one/github/diabetes-charts/src
        using description file: /home/one/github/diabetes-charts/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /home/one/github/diabetes-charts/package.json (relative path: ./src)
          using description file: /home/one/github/diabetes-charts/package.json (relative path: ./src/@angular/material/prebuilt-themes/diabetes-chart-theme.css)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css.js doesn't exist
            as directory
              /home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css doesn't exist
[/home/one/github/diabetes-charts/src/node_modules]
[/home/one/github/node_modules]
[/home/node_modules]
[/node_modules]
[/home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css]
[/home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.ts]
[/home/one/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css]
[/home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.js]
[/home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css]
[/home/one/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.ts]
[/home/one/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.js]
[/home/one/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css]
[/home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css]
[/home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.ts]
[/home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css.js]
[/home/one/github/diabetes-charts/node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.css]
[/home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css]
[/home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css.ts]
[/home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css.js]
[/home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css]
[/home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css]
[/home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css.ts]
[/home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css.js]
[/home/one/github/diabetes-charts/src/@angular/material/prebuilt-themes/diabetes-chart-theme.css]
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css 3:10-212
 @ ./src/styles.css
 @ multi ./src/styles.css ./src/diabetes-chart-theme.scss

webpack: Failed to compile.

Answer 1

将您的 angular-cli.json 更改为：

"styles": [
  "styles.css",
  "../node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.scss"
],

Answer 2

删除.angular-cli.json 中对diabetes-chart-theme.scss 的引用。将styles.css 重命名为styles.scss 并更新.angular-cli.json。现在，从您的styles.scss 导入您的diabetes-chart-theme.scss。这假定两个文件都在 src 下，并且您的 .angular-cli.json 文件具有应用程序的 "root": "src"。