ServiceWorker 离线 - HTML 中没有类名

Question

我一直在尝试使用 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} />

生成的

Answer 1

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

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

为 scss 文件安装合适的加载器解决了这个问题。

ServiceWorker Offline - No classNames in HTML