我在一个 UI 库中工作，我已经在我的组件中导入了 scss 样式（例如按钮）。如果我在客户端应用程序中实例化组件按钮两次（我的 UI 库作为依赖项），scss 也会调用两次。 有什么方法可以让应用程序客户端调用一次按钮的 scss？
现在我在我的组件中导入 scss，例如： 我有一个带有 my-custom-button.html、my-custom-button.scss 和 my-custom-button.ts 的组件“my-custom-button”。所以我将 my-custom-button.ts 中的 scss 文件导入为 stylesUrl。
【问题讨论】：
标签： angular typescript sass styles
这里发生了什么？ Angular 使用组件隐喻，每个组件都有自己的视图封装。默认情况下是模拟的（含义见下文）。
您可以通过将封装属性设置为下列值之一来切换到另一个ViewEncapsulation 模式：
ViewEncapsulation.None：没有进行封装，你的组件样式将应用到任何匹配 CSS 中使用的选择器的元素。
ViewEncapsulation.Emulated：Angular 将重写您的组件样式（向选择器添加自定义属性）以仅匹配相关组件并在 head 中附加内联 <style> 标签。
ViewEncapsulation.Native：Angular 将使用浏览器的原生 shadow DOM（不适用于旧浏览器）。
例子：
@Component({
...
encapsulation: ViewEncapsulation.Native,
...
})
查看Component Styles了解更多详情。
总结：
您可以避免即时评估，方法是将您的样式放入一个随机的 css 文件中，然后将其放入 HTML 的 head 中，但最终会导致每个组件样式都没有被封装。
也许ViewEncapsulation.Native 性能更高，但我也没有证据证明这一点，也不知道如何对其进行基准测试（有a question related to this topic），并且它不适用于旧版浏览器。
【讨论】：
【讨论】：