ServiceWorker Offline - No classNames en HTML

Question

J'ai essayé d'implémenter la mise en cache dans mon projet React 16, en utilisant Workbox. Il semble mettre en cache quelque chose, car la page est toujours rendue en mode offline. Mais je n'arrive pas à comprendre pourquoi ma version en cache ne contient aucun classNames sur les éléments.

Version normale:

Version Cached

En outre, le préchargement semble fonctionner correctement aussi:

J'ai mis en Workbox par Webpack avec le bloc de code suivant:

new workboxPlugin({ 
    globDirectory: 'build/client', 
    globPatterns: ['**/*.{html,js,css,png,jpeg}'], 
    swDest: './build/client/sw.js', 
}), 

Quelle pourrait être la cause de cela? Les images ne sont pas non plus chargées, même si elles doivent également être mises en cache.

EDIT:

Il semble que les fichiers .js ne sont pas chargés. Les fichiers main & vendor.js contiennent le contenu requis pour attribuer des noms de classes. Comme vous pouvez le voir, ne peut pas être trouvé les fichiers .js

. C'est dans un preload, mais les supprimer juste transfère l'erreur au <script /> en incluant les dossiers. De plus, l'emplacement de l'enregistrement des travailleurs de service ne semble pas avoir d'importance.

Side note: Mes classnames sont générés en utilisant import styles from './index.scss'=><div className={styles.container} />

Answer 1

Il semble que ma SSR (server.webpack.config) a échoué sur le chargement du CSS. J'ai dû modifier ma configuration de serveur pour correspondre à la configuration du client concernant le chargeur css.

Parce que je n'avais pas cela d'abord, il lirait les fichiers scss en tant que fichiers txt normaux, qu'il ne pouvait pas reconnaître, et à cet effet ne pouvait pas utiliser la méthode styles.container.

La mise en place de chargeurs appropriés pour les fichiers scss a résolu le problème.