Search code examples
reactjsreduxgithub-pagesstyled-components

Why are my GlobalStyles not working after deploying with styled components?

I'm using React, Redux, styled components and GitHub pages with my app.

Global styles work in development, but do not get applied after deploying to GitHub pages.

e.g. in 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;
Solution

  • The problem lies in the fact that there is currently an issue when using @import in Global Styles. The solution is to take the @import out and place it elsewhere, such as in a link tag, if you're using Google fonts.