我的 CSS 类在样式组件的生产版本中在哪里

Question

正如标题所述，我需要了解 styled-components 在生产版本中将 css 捆绑在何处。

我认为这归结为我对 styled-components 的实际工作原理缺乏了解。我的印象是它聚合了所有样式并将它们注入头部。当我在本地运行时，我可以在脑海中看到样式标签，当我展开它时，我会看到 css 类名。

但是在生产版本中，它的头部仍然有样式标签，但它是空的。像这样：

奇怪的是，当我从生产版本中删除该样式标签时，我的所有样式都消失了，如下所示：

如果标签中没有任何内容，它如何删除我的样式？

我问的原因是因为我正在尝试与 LivePerson 集成，以便我们的支持团队可以实时查看用户屏幕。 LivePerson 通过将 HTML CSS 和图像代理到他们自己的服务器并为支持人员“重新播放”它来实现这一点。但是，当我这样做时，没有任何样式出现，图像和 html 都很好。

任何关于我的 css 所在位置的澄清推理将不胜感激

谢谢

Answer 1

我遇到了类似的问题并发现了这个；希望它会有所帮助。

在生产中，我们使用 CSSOM API 来注入样式，这些样式在开发工具中以不同的方式表示，可以通过访问样式表 DOM 节点上的 .sheet.cssRules 属性来读取。

找到here。因此，您的 styled-components 使用“空”样式标签在生产中以应有的方式工作。由于注入的方式，它只是看起来是空的，但实际上包含您的 css（这就是为什么删除它会删除您的样式）。

或者，您可以尝试添加一个全局变量

global.SC_DISABLE_SPEEDY = true

这导致一些用户看到他们的样式组件 css 被填充到相应的样式标签中。更多关于 here.

希望这能回答你的问题。