css - styled-components 的生产版本中我的 css 类在哪里

Question

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

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

然而，在生产构建中，它的头部仍然有样式标签，但它是空的。像这样:

奇怪的是，当我从生产构建中删除那个样式标签时，我所有的样式都消失了，就像这样:

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

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

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

谢谢

Answer 1

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

In production we use the CSSOM APIs to inject styles, which are represented differently in dev tools and can be read by accessing the .sheet.cssRules property on the stylesheet DOM node.

找到 here .因此，您的样式化组件正在使用“空”样式标签在生产中以应有的方式工作。由于它的注入(inject)方式，它看起来是空的，但实际上包含您的 css(这就是为什么删除它会删除您的样式)。

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

global.SC_DISABLE_SPEEDY = true

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

希望这能回答您的问题。