Question

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

现在我在我的组件中导入scss，例如：我有一个组件＆＃34; my-custom-button＆＃34;使用my-custom-button.html，my-custom-button.scss和my-custom-button.ts。所以我将my-custom-button.ts中的scss文件导入为stylesUrl。

Answer 1

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

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

ViewEncapsulation.None：没有封装，您的组件样式将应用于与CSS中使用的选择器匹配的任何元素。
ViewEncapsulation.Emulated：Angular会重写您的组件样式（向选择器添加自定义属性）以仅匹配相关组件，并在<style>附加内联head标记。< / p>
ViewEncapsulation.Native：Angular将使用浏览器的原生影子DOM（不会在旧浏览器上工作）。

示例：

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

有关详细信息，请参阅Component Styles。

总结：

您可以通过将样式放在HTML中head中的随机css文件中来动态地避免评估，但最终会得到未封装的每个组件样式。

也许ViewEncapsulation.Native性能更高，但我没有证明这一点，并且没有关于如何对其进行基准测试的想法（有a question related to this topic），并且它不适用于旧浏览器。

Answer 2

尝试这种方式：

构建包使用时gulp-inline-ng2-template。它将为您的组件内联templace和css。也许它会阻止你所描述的行为。

scss使用的一些gulp配置示例是here

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

2 个答案: