爲什麼導入的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]; 
    } 
    } 
}