각도 2 재질 테마가 SCSS의 색상 참조

Question

공식 테마 guide을 사용하여 사용자 지정 테마를 만들었습니다.

@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 내에서 색상 변수에 액세스 할 수 없습니다. Webstorm에서

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

오류 :

"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. 

누군가가이 문제를 해결하는 방법을 알고 있나요

문제? 미리 감사드립니다.

Answer 1

mat-color($primary) 기능을 @angular/material/core/theming/_theming.scss에서 사용하려고합니다. 팔레트를 가져 와서 색상을 반환합니다.