css - 我的 CSS 类在样式组件的生产版本中在哪里
问题描述
正如标题所述,我需要了解 styled-components 将 css 捆绑在生产版本中的位置。
我认为这归结为我对 styled-components 的实际工作原理缺乏了解。我的印象是它聚合了所有样式并将它们注入头部。当我在本地运行时,我可以在脑海中看到样式标签,当我展开它时,我会看到 css 类名。
但是在生产版本中,它的头部仍然有样式标签,但它是空的。像这样:
奇怪的是,当我从生产版本中删除该样式标签时,我的所有样式都消失了,如下所示:
如果标签中没有任何内容,它如何删除我的样式?
我问的原因是因为我正在尝试与 LivePerson 集成,以便我们的支持团队可以实时查看用户屏幕。LivePerson 通过将 HTML CSS 和图像代理到他们自己的服务器并为支持人员“重新播放”它来实现这一点。但是,当我这样做时,没有任何样式出现,图像和 html 都很好。
任何关于我的 css 所在位置的澄清推理将不胜感激
谢谢
解决方案
我遇到了类似的问题并发现了这个;希望它会有所帮助。
在生产中,我们使用 CSSOM API 来注入样式,这些样式在开发工具中以不同的方式表示,并且可以通过访问样式表 DOM 节点上的 .sheet.cssRules 属性来读取。
在这里找到。因此,您的 styled-components 使用“空”样式标签在生产中以应有的方式工作。由于注入的方式,它只是看起来是空的,但实际上包含您的 css(这就是为什么删除它会删除您的样式)。
或者,您可以尝试添加一个全局变量
global.SC_DISABLE_SPEEDY = true
这导致一些用户看到他们的样式组件 css 被填充到相应的样式标签中。更多关于这里。
希望这能回答你的问题。
推荐阅读
- php - 通过数据透视表使用关系
- amazon-web-services - 如何使 IAM 身份验证在 aws 中的 ALB 上工作?
- python - 以 4:3 格式而不是 16:9 格式在 python 中拍照
- javascript - 正则表达式 - 可选的非捕获组不匹配
- python - 只能分析第一行数据,其余为 NaN。(Python、熊猫、谷歌 Colab)
- scala - 在scala中获取char编码信息
- sql - 子查询返回超过 1 个值。当子查询遵循 SQL Server 时,这是不允许的
- javascript - 按按钮复制组件
- php - 从laravel中的一句话中取一个词?
- asp.net-core - 如何通过 Swashbuckle 使 SwaggerUI 在 traefik 代理后面的 docker 容器中工作?