我正在一个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。
这里发生了什么？Angular 使用组件隐喻，每个组件都有自己的视图封装。默认情况下会模拟(含义见下文)。
您可以通过将封装属性设置为以下值之一来切换到另一种ViewEncapsulation模式：
-
ViewEncapsulation.None：不进行封装，您的组件样式将应用于与 CSS 中使用的选择器匹配的任何元素。 -
ViewEncapsulation.Emulated：Angular 将重写您的组件样式(将自定义属性添加到选择器)以仅匹配相关组件，并在head中附加内联<style>标签。 -
ViewEncapsulation.Native：Angular 将使用浏览器的原生阴影 DOM(不适用于旧浏览器)。
例：
@Component({
...
encapsulation: ViewEncapsulation.Native,
...
})
有关更多详细信息，请参阅组件样式。
总结：
你可以通过将你的样式放在一个随机的css文件中来避免即时评估，你把这个文件放在HTML的head中，但它最终会导致每个组件样式都没有被封装。
也许ViewEncapsulation.Native的性能更高，但我也没有证据证明这一点，也没有关于如何对其进行基准测试的想法(有一个与此主题相关的问题)，并且它不适用于较旧的浏览器。
试试这个方式：
构建包时，请使用 gulp-inline-ng2-template。它会将内联 templace 和 css 到你的组件。也许它会阻止你描述的行为。
这里有一些使用 scss 的 gulp 配置示例