Question

我正在使用我的应用程序使用React，Redux，样式化组件和GitHub页面。

全局样式可在开发中使用，但部署到GitHub页面后不会应用。

例如在App.js中

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
   body {
      @import url("https://fonts.googleapis.com/css?family=Quicksand");
      color: red;
   }
`

const App = () => (
   <React.Fragment>
      <GlobalStyle />
      <Provider store={store}>
         <Router>
            <div>
              //REST OF APP
            </div>
         </Router>
      </Provider>
   </React.Fragment>
);

export default App;

Answer 1

问题在于，在全局样式中使用@import时当前存在问题。解决方案是，如果您使用的是Google字体，则将@import取出并放在其他位置，例如链接标记中。

Answer 2

这件事也发生在我身上，您有关此问题的信息对我有所帮助。谢谢@Brendan！

Answer 3

将您对https的请求上传到GitHub页面后，该请求将被阻止，因此CSS导入失败

Answer 4

在createGlobalStyle中使用@import时，文档尚不清楚。与开发相比，生产似乎有所不同，最有可能是停止FOUC，如果将@import移到顶层，则它将正确导入并显示您的样式。

kafka-server-stop

Answer 5

当我去部署使用Google字体的React应用的生产版本时，我遇到了同样的问题。然后，我发现了一个很棒的项目：https://github.com/KyleAMathews/typefaces。它具有所有种Google字体，并可以通过NPM使用。

基本上，我要做的就是

npm install typeface-pt-mono --save

然后在呈现我的index.js组件的顶级App.js中：

import "typeface-pt-mono";

就是这样。现在我的应用程序中到处都有css指向 font-family: "PT Mono"可以正常工作。

在使用样式化组件进行部署后，为什么我的GlobalStyles无法正常工作？

5 个答案: