生产模式下,styled-component生成的style标签没有内容
In production mode, the style tag that generated by styled-component has no content
复制
https://codepen.io/wqh/pen/KKqjaWL
重现步骤
首先,抱歉我的英语不好,我希望你能明白我的意思。
打开codepenlink可以在开发者工具中看到现象:
生成的样式标签没有内容,但实际有效
例子是低版本的,但是我项目的5.3.3
版本有同样的问题
预期行为
生成的样式标签内容也可以在生产模式下获取
看到一个Q&A说insertRule
会导致style标签的内容变成unavailable.But我在IE11中用css-vars-ponyfill修复vars,这个需要获取样式标签的内容。
实际行为
生产模式下,生成的样式标签没有内容,这与开发模式不一致
样式在 DOM 中的注入方式在开发环境和生产环境中有所不同。
如前所述here (How styles land in the DOM),
This step differs from development mode to production mode.
In development mode, styled-components will inject a style tag inside the head of the page's DOM. This tag will include some data meta properties like the library's version used. And inside the tag, styled-components will append all the styles from your StyledComponents bound to their classNames.
In production mode however, things are a bit different. Since we need to optimize and compress stuff the most we can, the style tag injected by styled-components will still be there, but will be injected as empty.
复制
https://codepen.io/wqh/pen/KKqjaWL
重现步骤
首先,抱歉我的英语不好,我希望你能明白我的意思。
打开codepenlink可以在开发者工具中看到现象:
生成的样式标签没有内容,但实际有效
例子是低版本的,但是我项目的5.3.3
版本有同样的问题
预期行为
生成的样式标签内容也可以在生产模式下获取
看到一个Q&A说insertRule
会导致style标签的内容变成unavailable.But我在IE11中用css-vars-ponyfill修复vars,这个需要获取样式标签的内容。
实际行为
生产模式下,生成的样式标签没有内容,这与开发模式不一致
样式在 DOM 中的注入方式在开发环境和生产环境中有所不同。
如前所述here (How styles land in the DOM),
This step differs from development mode to production mode.
In development mode, styled-components will inject a style tag inside the head of the page's DOM. This tag will include some data meta properties like the library's version used. And inside the tag, styled-components will append all the styles from your StyledComponents bound to their classNames.
In production mode however, things are a bit different. Since we need to optimize and compress stuff the most we can, the style tag injected by styled-components will still be there, but will be injected as empty.