javascript - 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找不到文件。这是在 a 中preload，但删除它们只会将错误转移到<script />包含文件。此外，服务工作者注册的位置似乎并不重要。

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

score 0 · Accepted Answer

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

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

为文件放入适当的加载scss器解决了这个问题。

1 回答 1