将 SCSS `@extends` 与深层元素样式一起使用

Question

鉴于以下情况，我如何在一个地方声明嵌套 SCSS 样式的模块并利用 @extends 在 :host 上定义 ::ng-deep 样式？

:host.tr.project {
  @extend .project;
}

.project {
  border: solid 1px orangered;
  display: table-row;

  .cta {
    .button {
      background: tomato;
      border: solid 1px cyan;
      border-radius: 50%;
    }
  }

}

.project border & display 的样式被应用，但是，.cta 和|或.cta .button 没有应用样式。我需要那个。

我在不同的选择器之前和之后尝试了不同的ViewEncapsulation 策略（Emulated、Native、None）和::ng-deep，但都没有运气——也许你有我没想到的东西(?)

需要一些关于我的选择的指示。

Answer 1

你试过吗？

:host.tr.project {
  @extend .project;
    :host /deep/ .project.cta{
     // things goes here !
  }
}