共享Istanbul生成的React HTML覆盖率报告样式丢失如何解决

Google Drive上传后样式丢失的核心原因是：Drive的HTML预览机制会拦截相对路径的静态资源加载，就算你把prettify.css、base.css一同上传，预览页的路径和HTML内写的相对资源路径不匹配，浏览器无法加载到对应样式文件，自然只会显示无样式的纯内容。
可直接落地的方案按易用性排序如下：

• CI自动托管（长期最优方案）
  把覆盖率报告生成步骤接入团队现有CI流水线，跑完单元测试后自动把整个lcov-report目录作为静态站点产物部署，团队成员直接访问固定的内部静态地址即可查看，不需要手动传文件。如果团队没有专门的静态服务，用代码仓库自带的Pages服务也能实现，每次代码合并后自动更新最新版本的覆盖率报告。
• 单文件打包共享
  用静态资源内联工具把整个报告的所有CSS、JS、关联代码块文件全部内联到单个HTML文件中，生成的单文件不存在外部资源依赖，不管上传到Google Drive、企业协作工具还是发邮件，接收方直接打开就能看到完整带样式的报告，不需要额外操作。
• 压缩包兜底共享
  没有部署条件的话，不要单独传HTML和CSS文件，直接把整个lcov-report文件夹压缩成ZIP包上传到共享盘，告知团队成员下载后完整解压整个文件夹到本地，再双击打开文件夹内的index.html即可正常查看。注意不要直接在压缩包预览界面打开，也不要单独把index.html拖到其他目录打开，不然相对路径失效还是会丢样式。
• 临时快速共享
  如果只是临时同步当前本地的报告，直接进入web/coverage/lcov-report目录，执行python -m http.server 1234（本地安装Python即可直接运行）启动临时静态服务，同内网的成员直接访问你本机IP加1234端口就能查看，不需要上传下载任何文件。

内容的提问来源于stack exchange，提问作者user17498878