reactjs - 从生产构建中剥离的 React Styled Components

Question

我使用样式化组件作为我的 React 应用程序的 CSS 替代品。在开发中一切正常(第一个屏幕截图)，但是当我运行生产构建( npm build )时，样式标签中的样式被剥离(第二个屏幕截图)。因此，生产版本中没有样式。





这是生产版本:http://projects.loratadin.com.s3-website-us-east-1.amazonaws.com/weather-app/

这里是源代码:https://github.com/Loratadin/weather-app

Answer 1

我在生产中遇到了空样式标签的类似问题。我正在使用 headless 浏览器进行服务器端渲染，这个问题导致服务器端渲染的页面在加载 JS Assets 之前显示为没有样式。

找了好久，终于找到原因了。 Styled Components 库使用称为“快速模式”的东西在生产中注入(inject)样式。这使得样式绕过 DOM 并直接注入(inject)到 CSSOM 中，因此，出现在检查器中，但在 DOM 上完全不可见。

幸运的是，Styled Components 4.1.0 修复了这个问题!现在您可以设置一个名为 SC_DISABLE_SPEEDY 的全局变量。至true为了禁用 Speedy mode并让样式也出现在生产中。请记住，您应该在应用程序入口文件的最开始处执行此操作，然后再导入任何样式化的组件，否则将无法正常工作。

我这样做的方法是创建一个名为 globals.js 的新文件。包含 global.SC_DISABLE_SPEEDY = true
并将其作为我的 index.js 中的第一件事导入.

引用:https://www.styled-components.com/releases#v4.1.0