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

Question

我在一个UI库中工作，并且已将scss样式导入到我的组件中（例如，按钮）。 如果我在客户端应用程序中两次实例化组件按钮（我的UI库作为依赖项），那么scss也会调用两次。 有什么方法可以让应用程序客户端在按钮的scss之后调用吗？

现在，例如，将scss导入我的组件中：我有一个组件“ my-custom-button”，其中包含my-custom-button.html，my-custom-button.scss和my-custom-button.ts。 因此，我将my-custom-button.ts中的scss文件导入为stylesUrl。

Answer 1

这是怎么回事？ Angular使用组件隐喻，每个组件都有自己的视图封装。 默认情况下是模拟的（有关含义，请参见下文）。

您可以通过将encapsulation属性设置为以下值之一来切换到另一个ViewEncapsulation模式：

• ViewEncapsulation.None ：没有完成封装，您的组件样式将应用于与CSS中使用的选择器匹配的任何元素。

• ViewEncapsulation.Emulated ：Angular将重写您的组件样式（向选择器添加自定义属性）以仅匹配相关组件，并在head添加一个内联<style>标记。

• ViewEncapsulation.Native ：Angular将使用浏览器的本机阴影DOM（不适用于旧的浏览器）。

例如：

@Component({
   ...
   encapsulation: ViewEncapsulation.Native,
   ...
})

有关更多详细信息，请参见组件样式 。

结论：

通过将样式放在HTML head中的随机css文件中，可以避免进行动态评估，但是最终会封装所有未封装的组件样式。

也许ViewEncapsulation.Native的性能更高，但是我对此也没有证据，也没有关于如何对其进行基准测试的想法（ 与该主题相关的问题 ），并且它不适用于较旧的浏览器。

Answer 2

尝试这种方式：

构建软件包时，请使用gulp-inline-ng2-template 。 它将内联templace和CSS到您的组件。 也许它将阻止您描述的行为。

与SCSS使用一些一饮而尽配置的例子是在这里