从生产版本中剥离出来的React样式组件

Question

我使用样式化组件作为我的React App的CSS替代品。在开发中，一切正常（第一个屏幕截图），但是当我运行生产版本（npm build）时，样式标签中的样式被剥离（第二个屏幕截图）。结果，生产版本中没有样式。

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

以下是源代码：https://github.com/Loratadin/weather-app

Answer 1

对于在那里的Create React App人员，您可以在根目录中添加.env文件并添加：

REACT_APP_SC_DISABLE_SPEEDY=true

Answer 2

我能够复制您的问题，当应用程序在生产中时，它无法选择样式化组件内的html元素（样式不适用于该元素）。相反，您需要为input和button创建其他样式化的组件。

工作示例：https://github.com/mattcarlotta/Weather-App

我重构了您的应用程序以简化其结构。请阅读README，以获取有关如何在开发和生产中运行它的说明（请勿将以上存储库用于生产，因为没有必要使用express后端，我只是这样做了。您可以运行本地生产版本。

我更改了：

• 将所有styled组件移至components文件夹以实现模块化
• 任何形式的全局样式都放在styles文件夹中
• 将assets移动到images并将它们导入到需要它们的styled组件中（消除了使用require('../path/to/image')的需要）
• 简化了App.js文件。子级由state和班级methods控制。最重要的是，将您的form变成了controlled component，并将getWeather方法固定为：不允许空提交，如果AJAX调用失败，它将{{1 }}错误（而不是破坏您的应用程序），并在成功提交后重置表单输入。
• 添加了catch以确保prop-types在声明中保持一致（字符串仍然是字符串，数字仍然是数字，依此类推）。

Answer 3

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

经过大量搜索，我终于找到了原因。样式组件库使用一种称为“快速模式”的东西在生产中注入样式。这使样式绕过DOM`并直接注入CSSOM中，从而出现在检查器中，但在DOM上完全不可见。

幸运的是，样式化组件4.1.0附带了针对此问题的修复程序！现在，您可以将名为SC_DISABLE_SPEEDY的全局变量设置为true，以禁用Speedy mode并使样式也出现在Production中。请记住，您应该在导入任何样式化的组件之前，在应用程序的入口文件的最开始处执行此操作，否则它将无法正常工作。

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

参考：https://www.styled-components.com/releases#v4.1.0