Угловой материал предопределенного цвета темы

Question

Как получить доступ к цветовым переменным ($ primary, $ accent, $ warn, $ foreground, $ background) в файле scss из предопределенной угловой темы @ angular / material / prebuilt-themes / deeppurple-amber.css '?

Answer 1

create _variable.scss

// Import material theming functions
@import '~@angular/material/theming';

// Create your Sass color vars
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);
$warn: mat-color($app-warn);

Импорт _variables.scss в файл sass компонента, в котором вы хотите его использовать.

@import "~_variables.scss";
.selected {
  background-color: $accent;
}

Не забудьте включить тему.scss в файле .angular-cli.json:

{
...
  "apps": [{
  ...
  "styles": ["_variables.scss"]
  }]
  ...
}

если вы все еще не получили, перейдите по этой ссылке https://medium.com/@aleixsuau/how-to-use-angular-material-2-sass-variables-in-your-components-76ce0203f126