Cache bust background images in my CSS with Gulp without having to edit my SASS?
<p>I want to cache bust background images in my CSS. So if my original style is:</p>

<pre><code>.one {
  background: url(image.png);
}
</code></pre>

<p>A string can be added:</p>

<pre><code>.one {
  background: url(image.png?1234);
}
</code></pre>

<p>Or the file name could be changed:</p>

<pre><code>.one {
  background: url(image-1234.png);
}
</code></pre>

<p>Rather than using a random generator or a timestamp id like to use a hash of the image file so that the cache is only busted when needed (when the file has actually changed). </p>

<p>Im using SASS and Gulp so I could use Gulp Cache Buster and Gulp Hasher:</p>

<p><a href="https://github.com/disintegrator/gulp-hasher" rel="noreferrer">https://github.com/disintegrator/gulp-hasher</a></p>

<p><a href="https://github.com/disintegrator/gulp-cache-buster" rel="noreferrer">https://github.com/disintegrator/gulp-cache-buster</a></p>

<p>The issue I have with these is that it looks like you need to modify your SASS. So if you start with this: </p>

<pre><code>.logo {
  background: url(assets/images/logo.svg);
}
</code></pre>

<p>You need to change it to this: </p>

<pre><code>.logo {
  background: url(ASSET{assets/images/logo.svg});
}
</code></pre>

<p>I want to keep my SASS nice and clean and not modify it in this way. Is this possible? </p>