ServiceWorker Offline - HTML中没有classNames

Question

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

普通版：

缓存版本

此外，预取似乎也正常工作：

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

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

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

编辑：

似乎没有加载.js个文件。 main＆amp; vendor .js个文件包含分配classNames所需的内容。

如您所见，无法找到.js个文件。这是preload，但删除它们只会将错误传输到包含文件的<script />。此外，服务人员注册的位置似乎并不重要。

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

生成的

Answer 1

似乎我的SSR（server.webpack.config）在CSS加载时失败了。我不得不修改我的服务器配置以匹配关于css加载器的客户端配置。

因为我一开始没有这样做，所以它会将scss个文件作为普通的txt文件读取，而这些文件是他无法识别的，因此无法识别styles.container个文件。使用scss方法。

为$(document).ready(function(){ var i =0; $(".addmore").on('click', function () { // alert("ks"); var count = $('#form_table')[0].rows.length; alert(count); var data = "<tr class='case'><td><span id='snum" + count + "'>" + count + ".</span></td>"; data += "<td><input class='form-control' type='text' name='wname[]'/></td><td><button type=\"button\" id='newtrbtn' class='btn btn-success childtbl'>+ add new Title</button></td></tr>"; $('#form_table').append(data); i++; }); $(".childtbl").on('click', function () { alert("come from second"); var count1 = $('#form_table1')[0].rows.length; alert(count1); var data1 = "<tr class='case1'><td><span id='snum1" + count1 + "'>" + count1 + ".</span></td>"; data1 += "<td>Title:<input class='form-control' type='text' name='wr[]'/></td></tr>"; $('#form_table1').append(data1); i++; }); });文件添加适当的加载器解决了问题。