我使用样式化组件作为我的 React 应用程序的 CSS 替代品。在开发中一切正常(第一个屏幕截图),但是当我运行生产构建( npm build
)时,样式标签中的样式被剥离(第二个屏幕截图)。因此,生产版本中没有样式。
这是生产版本:http://projects.loratadin.com.s3-website-us-east-1.amazonaws.com/weather-app/
这里是源代码:https://github.com/Loratadin/weather-app
最佳答案
我在生产中遇到了空样式标签的类似问题。我正在使用 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
关于reactjs - 从生产构建中剥离的 React Styled Components,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53486470/