css - 缓存在 SASS 文件中链接的破坏图像

Question

我是 Laravel 5.0 的新手，但不是 PHP。我一直在使用 Elixir 来编译我的 SASS，从我的资源目录复制图像并通过 mix.version 函数运行它们以防止缓存。

然而，这对 CSS、图像和 JavaScript 非常有效；是否也可以让 Elixir 缓存清除我的 CSS/SASS 中链接的图像？当然，对图像进行版本控制很容易，但是有没有办法调整 CSS 以反射(reflect)新文件名？

我发现了这个:https://github.com/trentearl/gulp-css-url-adjuster它允许您将查询参数附加到 CSS 文件中的文件路径，这样就解决了一半的问题。如果可以在每次运行 gulp 时自动更改查询参数，我会很乐意使用它。

关于如何实现这一点，或者是否可能，有什么想法吗？

我想这样做的原因是我一直在开发我的应用程序并且我使用了一个经常重新排列的大型 Sprite 表，缓存破坏是一个要求，如果它可以在 gulp 运行时自动进行，那将节省我很多时间和精力。

谢谢

Answer 1

以@Amo 的答案为灵感，我最终使用的解决方案是 mixin，它利用 unique_id() 函数生成随机值.这避免了必须定义自定义 SASS 函数，因此它更简单，正如@Amelia 指出的那样，也更简洁一些。

混合

@mixin background-cache-bust($url) {
    background-image: #{'url('} + $url + #{'?v='} + unique_id() + #{')'};
}

示例

.sprite {
    @include background-cache-bust('/build/images/common/sprite.png');
}

结果

.sprite {
    background-image: "url(/build/images/common/sprite.png?v=u95ab40e0)";
}