adngular 4 sass 컴파일 문제

Question

각도가 구성 요소에 대해 올바르게 축음을 컴파일하지 않거나 예상대로 작동하지 않는 것 같습니다.

예 :

/* Works well */ 
.container { 
    .header { 
     margin-top: 20px; 
    } 
} 
.container { 
    .header { 
     background-color: black; 
    } 
} 

을하지만 다음 header 구성 요소를 생성하는 경우 다음이 작동하지 않습니다 어떤 이유로 반복적 인 선택기가있는 header.component.scss 스타일을 추가 :이 코드는 app.component.scss 잘 작동!

/* Doesn't work */ 
.container { 
    .header { 
     padding: 15px; 
    } 
} 

Angular framework correclty에서 인식 할 수있을 때까지 그런 scss 코드를 작성하면 안된다고 말하지 마십시오. I'am 뭔가 잘못 :)

은 내가 볼 수

Answer 1

, 당신이 view-encapsulation

1. 기본보기 캡슐화의 문제에 직면하고 생각 브라우저의 기본 그림자 DOM 구현을 사용을하는 경우 또는 설명 (참조 그림자 DOM을 MDN 사이트에서 사용하여) 섀도우 DOM을 구성 요소의 호스트 요소에 첨부 한 다음 해당 섀도 DOM 내에 구성 요소 뷰를 넣습니다. 구성 요소의 스타일은 그림자 DOM 내에 에 포함됩니다.

2. 에뮬레이트보기 캡슐화 (기본값) 전처리 (및 이름 변경)에 의한 그림자 DOM의 동작 효율적으로 범위를 구성 요소의보기로 CSS로 CSS 코드를 에뮬레이트합니다.

3. 없음은 Angular가 캡슐화되지 않음을 의미합니다. Angular는 CSS를 전역 스타일에 추가합니다. 앞서 설명한 범위 지정 규칙, 격리 및 보호는 적용되지 않습니다. 기본적으로 구성 요소의 스타일을 HTML에 붙여 넣는 것과 동일합니다 ( ).

encapsulation: ViewEncapsulation.Native