为什么导入的css文件存储在localstorage中，而不是像链接的css文件一样刷新？

Question

文件：

• listing.less（文/ CSS）
• style.less（文/ CSS）

工具：

• 火狐
• Firefox的插件是HttpFox用于检查http标头
• Chrome

我有一个名为listing.less CSS文件，该文件包含以下内容：

@import "/orb/static/less/style.less"; 

当我打电话listing.less一切正常，style.less是进口的。后续对listing.less的请求会产生304缓存响应。没关系。但是，导入的style.less不会显示为缓存响应。相反，我在浏览器的本地存储中找到它。更大的问题是，如果我改变style.less然后点击刷新浏览器将不会更新样式。只有当我从localstorage中删除style.less时，才会刷新它，或者在服务器上触摸listing.less。

这是@import的性质吗？每次我想更新style.less时，是否需要触摸list.less或从localstorage中删除style.less？ style.less如何被迫刷新？

Answer 1

这是LESS中的一个已知问题。看到这里的github上的问题： https://github.com/cloudhead/less.js/issues/47

我知道这并不直接解决您的问题，没有列出有一种解决方法，把你的less.js进口上述下面一行：

<script type="text/javascript">var less=less||{};less.env='development';</script> 
<script src="less.js"></script> 

与事一般应该工作。

Answer 2

这是我现在使用的方法，因为即使在开发模式下，我发现@imported CSS会一直保持缓存。

https://gist.github.com/1346280

// Destroys the localStorage copy of CSS that less.js creates 

function destroyLessCache(pathToCss) { // e.g. '/css/' or '/stylesheets/' 

    if (!window.localStorage || !less || less.env !== 'development') { 
    return; 
    } 
    var host = window.location.host; 
    var protocol = window.location.protocol; 
    var keyPrefix = protocol + '//' + host + pathToCss; 

    for (var key in window.localStorage) { 
    if (key.indexOf(keyPrefix) === 0) { 
     delete window.localStorage[key]; 
    } 
    } 
}