如何在angular 2中导入ui自定义库的样式？

我在一个UI库中工作，我已经在我的组件中导入了scss样式（例如按钮）。如果我在客户端应用程序中实例化组件按钮两次（我的UI库作为依赖项），SCS也会调用两次。 是否有任何方式，应用程序客户端在按钮的SCS一次调用

现在我在我的组件中导入SCS，例如：

---

我有一个包含my-custom-button.html、my-custom-button.scss和my-custom-button.ts的组件“my custom button”。因此，我将scss文件作为stylesUrl导入my-custom-button.ts中。

这里发生了什么？Angular使用组件隐喻，每个组件都有自己的视图封装。默认情况下是模拟的（请参见下文了解其含义）

通过将封装属性设置为以下值之一，可以切换到其他模式：

• ViewEncapsulation.None

  ：未完成封装，组件样式将应用于与CSS中使用的选择器匹配的任何元素

• ViewEncapsulation.Emulated

  ：Angular将重写组件样式（向选择器添加自定义属性）以仅匹配相关组件，并在

  头部添加一个内联
  标记
  

• ViewEncapsulation.Native

  ：Angular将使用浏览器的本机阴影DOM（在旧浏览器上不起作用）

例如：

有关更多详细信息，请参阅

总结如下：

您可以通过将样式放在随机css文件中，并将其放在HTML的

头部
，来避免动态评估，但最终会导致每个组件的样式都没有被封装

也许
ViewEncapsulation.Native
性能更好，但我也没有证据证明这一点，也不知道如何对其进行基准测试（有），而且它不适用于较旧的浏览器
 试着这样做：

在构建包时使用。它将把templace和css内联到您的组件中。也许这会阻止你描述的行为

scss使用的一些gulp配置示例是
您是否有代码显示如何加载组件和/或列出的文件内容，以帮助人们提供解决方案？
@Component({
   ...
   encapsulation: ViewEncapsulation.Native,
   ...
})