【发布时间】：2017-08-09 18:31:59
【问题描述】：
我有你的标准 Angular Material 主题。这是我的 theme.scss 文件：
@import '~@angular/material/core/theming/all-theme';
@include mat-core();
$candy-app-primary: mat-palette($mat-light-blue);
$candy-app-accent: mat-palette($mat-red, A200, A100, A400);
$candy-app-warn: mat-palette($mat-yellow);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);
我只想从各种组件 scss 文件中访问我的主题颜色。我尝试了一些东西，最近是这样的：
@import 'src/theme';
.problem {
background-color: $candy-app-accent;
}
我只是得到错误。我确定我在这里遗漏了一些非常基本的东西。
我得到的错误：
/src/app/dashboard/dashboard.component.scss
Module build failed:
undefined
^
(50: #fce4ec, 100: #f8bbd0, 200: #f48fb1, 300: #f06292, 400: #ec407a, 500: #e91e63, 600: #d81b60, 700: #c2185b, 800: #ad1457, 900: #880e4f, A100: #ff80ab, A200: #ff4081, A400: #f50057, A700: #c51162, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: white, 700: rgba(255, 255, 255, 0.87), 800: rgba(255, 255, 255, 0.87), 900: rgba(255, 255, 255, 0.87), A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #ff4081, lighter: #ff80ab, darker: #f50057, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": white, "600-contrast": white, "700-contrast": rgba(255, 255, 255, 0.87), "800-contrast": rgba(255, 255, 255, 0.87), "900-contrast": rgba(255, 255, 255, 0.87), "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null) isn't a valid CSS value.
in C:\Users\Error\Dropbox\Programming\OTB\OTB-Dashboard\node_modules\@angular\material\core\theming\_theming.scss (line 30, column 14)
@ ./src/app/dashboard/dashboard.component.ts 62:17-54
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
新信息：
所以经过一些试验后，看起来在我的组件 scss 文件中，我可以创建变量并通过该文件使用它们而没有任何问题。似乎问题实际上是我似乎无法将一个 scss 文件正确导入另一个文件。当我使用 @import 'src/theme';它实际上确实找到了文件，但是由于某种原因，当我尝试使用文件中的变量时它崩溃了。
【问题讨论】：
-
嘿，你有什么发现吗？我知道这是个老问题，但我面临着类似的问题。如果你能帮忙。谢谢！
-
从来没有工作过。放弃了努力。
标签： angular themes material-design