使用 Less 缓存破坏静态图像答案

【问题标题】：Cache Busting Static Images Using Less使用 Less 缓存破坏静态图像
【发布时间】：2015-06-26 12:16:26
【问题描述】：

情况：

我正在尝试将缓存清除查询参数添加到我的 less 文件中。在 less 文件中声明时间戳并将其附加到每个背景 css 属性：

@cache-version: `( new Date() ).getTime()` ;

background: url('images/icons.png?version=@{cache-version}')

结果显示在网络选项卡 Chrome 开发工具中附加到带有版本号的图像的 bust-string....

/assets/images/icons.png?version=1429402449860

问题：

问题是在 chrome 浏览器上执行“正常重新加载”后，它仍然显示“来自缓存”。这不是从服务器获取静态图像。

问题：

我怎样才能从服务器上抓取新鲜的静态图片？

编辑：

我小心翼翼地使用了这种方法，但没有运气：

http://www.bennadel.com/blog/2643-cache-busting-css-images-with-less-css.htm

我正在考虑尝试创建一个 grunt-task，但不确定这是否也能奏效。

【问题讨论】：

标签： javascript html css caching less

【解决方案1】：

问题是在 chrome 浏览器上执行“正常重新加载”后，它仍然显示“来自缓存”。这不是从 > 服务器获取静态图像。

Less 编译成静态 CSS，因此您需要在重新加载浏览器之前重新编译 CSS（更改缓存时间）。此外，当您在浏览器中使用 Less 时，Less 会缓存您的 Less 文件（因此可能会使用旧的缓存时间）。对于浏览器中的 Less，请将 environment 选项设置为 debug 以防止缓存。

【讨论】：