Тема Angular 2 Material относится к цвету в SCSS

Я создал специальную тему с официальным руководством.

@import '../node_modules/@angular/material/core/theming/_all-theme';
@include mat-core();

$primary: mat-palette($mat-teal);
$accent: mat-palette($mat-deep-orange);
$warn: mat-palette($mat-amber);

$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

Это действительно работает. Я могу установить цвет md-toolbar или md-button с помощью $primary. Но я не могу получить доступ к цветовым переменным в SCSS компонента.

:host {
  .mat-grid-tile-header {
    background-color: $primary;
  }
}

Ошибка в Webstorm:

"Element 'primary' is resolved only by name without using of explicit imports"

Ошибка после сбоя сборки: «Неопределенная переменная»

Окей, мне как-то нужно импортировать. Но я не понимаю, как это сделать.

Я пробовал импортировать тему:

@import "../../../theme.scss";
    :host {
      .mat-grid-tile-header {
        background-color: $primary;
      }
    }

Ошибка в Webstorm исчезла, но после сборки появилась новая ошибка:

Module build failed: 
undefined
            ^
      (50: #e0f2f1, 100: #b2dfdb, 200: #80cbc4, 300: #4db6ac, 400: #26a69a, 500: #009688, 600: #00897b, 700: #00796b, 800: #00695c, 900: #004d40, A100: #a7ffeb, A200: #64ffda, A400: #1de9b6, A700: #00bfa5, 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: white, 800: rgba(255, 255, 255, 0.87), 900: rgba(255, 255, 255, 0.87), A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: rgba(0, 0, 0, 0.87), A700: rgba(0, 0, 0, 0.87)), default: #009688, lighter: #b2dfdb, darker: #00796b, 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": white, "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": rgba(0, 0, 0, 0.87), "A400-contrast": rgba(0, 0, 0, 0.87), "A700-contrast": rgba(0, 0, 0, 0.87), "contrast-contrast": null) isn't a valid CSS value.

Кто-нибудь знает, как решить эту проблему? Заранее спасибо!


angular sass angular-material2
person Roman    schedule 28.03.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы захотите использовать функцию mat-color($primary) из @angular/material/core/theming/_theming.scss. Это берет палитру и возвращает цвет.

person DRiFTy    schedule 28.03.2017
comment
Спасибо за быстрый ответ! Это сработает, если я импортирую theme.scss. Но это означает, что мне нужно импортировать файл в каждый файл scss. Есть ли у вас возможность сделать это всего один раз? Это было бы намного чище. - person Roman; 28.03.2017
comment
Да, к сожалению, нет возможности выполнить глобальный импорт, потому что каждый файл .scss компилируется отдельно ... Я использую псевдоним webpack, чтобы, когда webpack забирает мой файл, он видит псевдоним и заменяет его правильным путем. Таким образом, мой импорт будет выглядеть так: @import "~material-theming/_theming". Псевдоним в конфигурации webpack выглядит так: alias: { 'material-theming': path.resolve(__dirname, './node_modules/@angular/material/core/theming/') } - person DRiFTy; 28.03.2017
comment
У меня есть компонент макета в общей папке, включая импорт файла theme.scss в этом компоненте, переменные доступны во всех файлах scss. scss в общем компоненте. @import ../../extend-theme.scss; .ng2-smart-row {& .selected {background: mat-color ($ primary, lighter, 0.5)! important; }} - person Gaalvarez; 06.07.2017