在生产模式下，styled-component 生成的样式标签没有内容

Question

复制

https://codepen.io/wqh/pen/KKqjaWL

重现步骤

首先，对不起我的英语不好，希望你能明白我的意思。

打开codepen链接，可以在开发者工具中看到现象：

生成的样式标签没有内容，但实际上有效。

例子是低版本，但是我项目的5.3.3版本也有同样的问题

预期行为

生成样式标签的内容也可以在生产模式下获取。

我看到一个Q&A说insertRule会导致style标签的内容不可用。但是我用css-vars-ponyfill修复IE11中的vars，这需要获取style标签的内容。

实际行为

生产模式下，生成的style标签没有内容，这与开发模式不符

Answer 1

样式在开发环境和生产环境中以不同的方式注入 DOM。

如here (How styles land in the DOM)所述，

此步骤因开发模式与生产模式而异。

在开发模式下，styled-components 会在页面 DOM 的头部注入一个样式标签。此标记将包含一些数据元属性，例如使用的库版本。在标签内部，styled-components 会将 StyledComponents 中的所有样式附加到它们的 classNames 上。

然而，在生产模式下，情况有些不同。由于我们需要尽可能地优化和压缩东西，styled-components 注入的样式标签仍然存在，但会被注入为空的。