Question

我有你的标准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文件正确导入到另一个scss文件中。当我使用@import'src / theme'时;它实际上确实找到了文件，但出于某种原因，当我尝试使用文件中的变量时，它会崩溃。

Answer 1

您必须在yours中导入该sass文件。因此，编译r可以到达主题上下文

如何从另一个scss文件访问我的主要主题颜色？

1 个答案: