LESS扩展不适用于Angular：host

Question

我有一个角度分量：

export class HeaderMainComponent { }

使用HTML：

<header>
  Some content
</header>

和更少的样式：

:host(.dark) {
  header { 
    &:extend(.dark all); 
  }
}

header {
  &.dark {
    background-color: black;
  }
}

我将该组件用作：

<header-main class="dark"></header-main>

先前的LESS代码不会将黑色背景应用于标头HTML标签。

仅当使用以下命令时，它才能起作用：

:host(.dark) {
  header { 
    background-color: black;
  }
}

header { }

为什么LESS extend与Angular :host不兼容？

我想念什么吗？

Answer 1

这是为您工作的代码：

:host(.dark) {
  header { 
     background-color: black;
  }
 }

header { }

以下是经过调整的代码，对您不起作用：

:host(.dark) header {
  &:extend(.dark all); 
}    

&.dark {
  background-color: black;
}

这是两者的输出。