2
votes

Pourquoi mes GlobalStyles ne fonctionnent-ils pas après le déploiement avec des composants stylisés?

J'utilise React, Redux, des composants stylisés et des pages GitHub avec mon application.

Les styles globaux fonctionnent en développement, mais ne sont pas appliqués après le déploiement sur les pages GitHub.

par exemple dans 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;

reactjs styled-components redux github-pages

1 commentaires

Cela fonctionne-t-il si vous exécutez une version de production localement?

5 Réponses :

1
votes

Le problème réside dans le fait qu'il y a actuellement un problème lors de l'utilisation de @import dans les styles globaux. La solution consiste à retirer @import et à le placer ailleurs, comme dans une balise de lien, si vous utilisez des polices Google.

0 commentaires

1
votes

Cela m'est arrivé aussi et vos informations sur le problème m'ont aidé. Merci @Brendan!

1 commentaires

Aucun problème. Je suis content d'avoir aidé!

1
votes

votre demande à https est bloquée une fois que vous l'avez téléversée sur les pages GitHub, donc votre importation css échoue

0 commentaires

3
votes

La documentation n'est pas claire quand il s'agit d'utiliser @import dans createGlobalStyle. Il semble y avoir une différence dans la production par rapport au développement, le plus susceptible d'arrêter FOUC, si vous déplacez le @import dans le niveau supérieur, il importera correctement et affichera vos styles.

import { createGlobalStyle } from 'styled-components';

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

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

export default App;

0 commentaires

1
votes

J'ai eu le même problème lorsque je suis allé déployer la version de production de mon application React qui utilise les polices Google. Puis j'ai découvert ce projet génial: https://github.com/KyleAMathews/typefaces . Il contient toutes les polices Google et les rend disponibles via NPM.

Essentiellement, tout ce que j'avais à faire était de

import "typeface-pt-mono";

Puis dans le index.js de niveau supérieur qui rend mon composant App.js :

npm install typeface-pt-mono --save

C'est tout. Maintenant partout dans mon application que j'ai css qui fait référence font-family: "PT Mono" ça marche.

0 commentaires