2017-12-10 11 views
2

에 대한 중앙 집중화 된 CSS/SCSS를로드 할 수있는 방법이 특정 구성 요소에 대한 중앙 집중화 된 CSS/SCSS를로드 할 수있는 방법이 거기입니다. .angular-cli.json은 다음과 같습니다각도 CLI 응용 프로그램에서 특정 구성 요소

"apps": [ 
    { 
     "root": "src", 
     .... 
     .... 
     "styles": [ 
     "styles.scss", 
     "../node_modules/firebaseui/dist/firebaseui.css" 
     ], 
    ] 

그러나, 하나 개의 구성 요소에 대해 나는 그것 그들을 대체하여 내 모든 스타일을 파멸로 styles.scss를로드하지 않습니다. 이 문제를 해결할 수있는 해법/해킹이 있습니다.

+0

는 구성 요소의 스타일은 전역 스타일 범위의 일부가 아닌 및 [이 문서 섹션] (https://angular.io/guide/component-styles#에 설명 된대로 글로벌 CSS 스타일에 의해 영향을받지 않습니다 스타일 범위). 생성 된 CSS로 디버깅 해봤습니까? 아마, 실제 구성 요소 코드 샘플과 장소에 정확하게 문제는 도움이 발생하는 위치. –

답변

0

당신은 구성 요소 selector에 포함시킬 수있는 -

encapsulation: ViewEncapsulation.None 

참조 링크 : - https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

스타일은 모든 중앙 스타일 후 마지막에로드 된 구성 요소가로드되므로, component.css를 부모를 대체 할 수 있습니다. CSS는하지만 parent.css은 component.css를 무시할 수 없습니다. 구성 요소 자체에 오버라이드없는 경우, 중앙 (부모) CSS는, 응용 프로그램 전체에 적용됩니다. 내가 생각할 수있는

0

유일한 방법은 해당 구성 요소가 ViewEncapsulation.Native를 사용할 수 있도록하는 것입니다.

진정한 구성 요소를 캡슐화하기위한 것입니다 진정한 그림자 DOM을 사용합니다 각도 Native

, 그래서 스타일이 밖으로 피가 없으며 조상로부터 스타일이 주입되지 않습니다.

을하지만, 당신이 한계를 알고 있어야합니다 .

기본적으로