2016-11-07 1 views
1

내가 예를 들어 :host >>>Angular2 NG-콘텐츠 SCS들 중첩 스타일과 StyleUrls : 호스트

를 사용할 때 중첩하는 SCS 또는 StylesUrl을 사용할 수 없다는 것을 나는 발견했다 ng-content를 사용하는 구성 요소를 구축하고 :

:host >>> .toolbar-brand{ 
    color: red; 
    font-weight: 500; 
    text-decoration: none; 
    font-size: 16px; 
    text-transform: uppercase; 
} 

:host >>> .nav-bar-menu-options.hlink, .nav-bar-menu-options.drop-down{ 
    font-weight: 500; 
    text-decoration: none; 
    position: relative; 
    top: -6px; 
    font-size: 16px; 
    text-transform: uppercase; 
    padding: 0 10px 0 10px; 

    &.has-divider { 
    border-right: 1px solid #b0bec5; 
    } 

} 

:host >>> .nav-bar-menu-options.hlink:hover { 
    text-decoration: underline; 
    cursor: pointer; 
} 
:host >>> .fill-remaining-space { 
    flex: 1 1 auto; 
} 
:host >>> .search-link { 
    cursor: pointer; 
} 

:host >>>.search-input-container{ 
    position:relative; 

    .search-link{ 
    position: absolute; 
    top: 3px; 
    left:30px; 
    } 
} 

:host >>> .my-input{ 
    border-left: 1px solid #b0bec5; 
    padding: 11px 75px 11px 60px; 
    background: transparent; 
    outline:none; 
    margin-left: 20px; 
    width: 100%; 
    &::placeholder { 

    } 
} 

사람은 말해 줄 수 왜 내 .has-divider & 내 .search-link이 작동하지 않습니다와 나는 .scss 파일 안에 내용을 배치하고 styleUrls을 사용하는 경우도 이유가 :host 작동하지 않습니다 중첩. 이 예상 또는 아마도 버그 내가 이상적으로 여전히 SASS 문제를 일으킬

답변

2

>>>이 알려져에서 중첩하는 SCS 및 외부하는 SCS 파일을 사용할 수 있도록하고 싶습니다

이다. 대신 /deep/

+0

그래서 줄에서보다는 파일에서 읽는 문제가 해결되었지만 여전히 중첩 된 스타일을 사용할 수있는 것 같지 않은 것 같습니다 ... – jonnie

+1

사실 내 안에 포장하면 실제로 작동하는 것 같습니다 ': 호스트/딥/{...}' – jonnie