我很想开始为使用Angular Material 2的Angular 5应用程序创建自定义主题应用程序。按照说明，我将src/diabetes-chart-theme.scss添加到{styles中的.angular-cli.json 1}}键。但是当我编译时，我得到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 /糖尿病图表-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.
答案 0 :(得分：1)
将angular-cli.json更改为：
"styles": [
"styles.css",
"../node_modules/@angular/material/prebuilt-themes/diabetes-chart-theme.scss"
],
答案 1 :(得分：0)
删除diabetes-chart-theme.scss中对.angular-cli.json的引用。将styles.css重命名为styles.scss并更新.angular-cli.json。现在，从diabetes-chart-theme.scss导入styles.scss。这假设这两个文件都在src下，而您的.angular-cli.json文件的应用为"root": "src"。