javascript - ServiceWorker 离线 - HTML 中没有类名

我一直在尝试使用 Workbox 在我的 React 16 项目中实现缓存。它似乎正在缓存某些内容，因为页面仍在 offline 中呈现。模式。但我似乎无法弄清楚为什么我的缓存版本在元素上不包含任何类名。

普通版:

缓存版本

此外，预取似乎也可以正常工作:

我使用以下代码块通过 Webpack 实现了 Workbox:

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

这可能是什么原因造成的？图像也没有被加载，即使它们也应该被缓存。

编辑:

看起来像.js文件没有被加载。 main & vendor .js文件包含分配类名所需的内容。

如您所见，.js找不到文件。这是在 preload 中，但删除它们只会将错误转移到 <script />包括文件。此外，Service Worker 注册的位置似乎并不重要。

旁注:我的类名是使用 import styles from './index.scss' 生成的=> <div className={styles.container} />

最佳答案

我的 SSR (server.webpack.config) 似乎在 CSS 加载时失败。我必须修改我的服务器配置以匹配有关 css 加载器的客户端配置。

因为我一开始没有这个，所以它会把scss文件当作普通的txt文件来读取，他无法识别，因此无法' t 使用 styles.container 方法。

为 scss 文件添加正确的加载器解决了问题。

关于javascript - ServiceWorker 离线 - HTML 中没有类名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46502948/