Angular2 ng内容scss嵌套样式和样式URL在使用:host时不起作用
我正在构建一个使用Angular2 ng内容scss嵌套样式和样式URL在使用:host时不起作用,angular,sass,angular2-ngcontent,Angular,Sass,Angular2 Ngcontent,我正在构建一个使用ng content的组件,我发现当我使用:host>> 例如: :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-o
ng content
的组件,我发现当我使用:host>>
例如:
: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 {
}
}
有人能告诉我为什么我的。有分隔符&我的嵌套。搜索链接不起作用,以及为什么我将内容放在.scss文件中并使用样式URL
时,它与:主机
不起作用。这是预期的还是可能的错误
理想情况下,我希望仍然能够使用来自的嵌套SCS,并且已知外部SCS文件会导致SASS出现问题。改为使用/deep/
,这样就解决了从文件中读取而不是在行中读取的问题,但似乎仍然无法使用嵌套样式…实际上,如果我只是在:host/deep/{…}