使用 :host 时 Angular2 ng-content scss 嵌套样式和 StyleUrls 不起作用

Question

我正在构建一个使用 ng-content 的组件，我发现在使用 :host >>>

时无法使用嵌套的 scss 或 StylesUrl

例如：

: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。这是预期的还是可能的 Bug

理想情况下，我希望仍然能够使用来自和外部 scss 文件的嵌套 scss

Answer 1

已知

>>> 会导致 SASS 出现问题。请改用 /deep/

使用 :host 时 Angular2 ng-content scss 嵌套样式和 StyleUrls 不起作用

Angular2 ng-content scss nested styles and StyleUrls not working when using :host

sass

angular2-ngcontent

angular