Html 已加载的精灵文件未被引用，而是对同一文件发出请求

我喜欢css

.is--stratus .icon__nav-threats.is--gray {
     background: url('/resources/img/navIcons_RiskInsight.png') no-repeat -1px -41px;
     width: 30px;
     height: 30px;
 }
.is--stratus .icon__nav-threats.is--blue {
    background: url('/resources/img/navIcons_RiskInsight.png') no-repeat -1px -83px;
    width: 30px;
    height: 30px;
 }

当我将元素的类名从is--gray更改为is--blue时，它会对同一个文件发出新的请求。因此，在几秒钟后加载背景图像，使UI看起来像是坏掉的

---

为什么会这样？我们在页面中加载css的方式在这里重要吗？我在使用webpack1，这似乎只发生在生产版本中，而不是在开发版本中。浏览器不缓存通过注入js的css加载的图像吗？？？

发现问题。响应头中的“缓存控制”属性。Web包的开发服务器正确设置响应头。但是我的tomcat服务器没有。需要正确配置

开发服务器的缓存设置

产品服务器（Tomcat）的缓存设置

---

我认为，页面加载后，您将通过css添加图像，这意味着您将始终看到精灵加载后的其他内容。你可以内联这些样式，或者将它们放在常规样式表中吗？@NathanielFlick发现了这个问题。它是缓存控制头。谢谢。该死的，我本来想建议的，但没想到会有帮助。很高兴你发现它起作用了！