프로젝트의 스타일 시트에서 기본 색상 검색

Question

각도 프로젝트의 CSS 파일에 각도 재료 테마에 사용 된 기본 색상을 검색하는 방법이 있습니까? 프로젝트에서

, 우리는이 같은 * .scss 파일에 기본 색상을 정의 할 수 있습니다 : 내 구성 요소 * .scss 파일을 사용하려고

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

@include mat-core(); 

$primary: mat-palette($mat-green, 800); 
$accent: mat-palette($mat-teal, 600, A100, A400); 
$warn: mat-palette($mat-red, 600); 

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

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

하지만 $primary 변수는 인식이었다

를

//*.scss file 
//... 
.myclass { 
    background: $primary; //This line compiles with the error 'Undefined variable: "$primary".' 

} 

Answer 1

변수를 사용하려면 먼저 정의해야합니다. 정의되고 마지막으로 변경되는 위치 (프레임 워크는 종종 일종의 설정 또는 유사 함을 가짐)에 따라 @import이 필요합니다.

그러나 scss가 일반적으로 사용되는 방법은 하나의 주 파일 (name.scss)과 여러 가져 오기 파일 (_name.scss)을 갖는 것입니다. 그런 다음 하나의 css 파일로 컴파일됩니다. 이러한 규칙을 확장하는 방법은 해당 주 파일의 끝에 (또는 표시된 점)에 추가하는 것입니다. 별도의 "메인"파일 (따라서 css 파일)을 만들면 css가 중복 될 수도 있습니다. 그렇지 않은 경우에도 여전히 비실용적입니다.

또한, 당신은 아마 내가 당신의 변수가 배열 인 것을 확신 mat-color($theme)