React Styled Components 从生产构建中剥离

Question

我使用 Styled Components 作为我的 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

我能够重现您的问题，看起来当应用程序处于生产状态时，它不能 select html 样式组件中的元素（样式不适用于元素）。相反，您需要为 input 和 button.

创建额外的程式化组件

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

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

我改了什么:

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

Answer 2

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

找了很久，终于找到原因了。 Styled Components 库使用一种叫做 "Speedy mode" 的东西在生产中注入样式。这使得样式绕过 DOM` 并直接注入 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

Answer 3

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

REACT_APP_SC_DISABLE_SPEEDY=true

React Styled Components 从生产构建中剥离

React Styled Components stripped out from production build

reactjs

styled-components