Angular库中的SCSS封装

Question

我想创建一个“可主题”的Angular库，这意味着该库的客户端可以应用例如他们自己的颜色。我已经检查了材料设计是如何做到的，他们正在做的是这样的：

在（图书馆）/theming.scss：

@import '~library/theming';
$theme: (
  'hello-background': yellow
);
@include apply-theme($theme);

在（客户端）/styles.scss：

 <div class="blocker"></div>
 <iframe width="420" height="315" 
 src="https://player.vimeo.com/video/258549989?background=1" 
  frameborder="0" allowfullscreen></iframe>
 <a href="http://tumblr.com" target="_blank" class="linkwrap">

但是这会设置全局类......这里的“.hello”类是全局的，所以任何具有“.hello”类的东西都会变成黄色，即使它只是偶然的同名。

所以我的问题是，有没有办法在没有全局类的情况下自定义scss，这更符合Angular的视图封装精神？我知道我可以使用ngStyle设置样式，但我更喜欢scss方式。

Answer 1

是的，请检查https://angular.io/guide/component-styles，:host seciton。