インポートされたCSSファイルがlocalstorageに保存され、リンクされたCSSファイルのように更新されないのはなぜですか？

Question

ファイル：

• listing.less（テキスト/ CSS）
• style.less（テキスト/ CSS）

ツール：

• Firefoxの
• FirefoxのアドオンhttpFox HTTPヘッダを検査するために
• クロム

私は、次のものが含まれlisting.lessという名前のCSSファイルがあります。

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

を、すべてが正常に動作listing.less私が呼び出すと、style.lessがインポートされます。後続のlisting.less要求は、304キャッシュ応答になります。それはいいです。しかし、インポートされたstyle.lessはキャッシュされたレスポンスとして表示されません。代わりに、私はブラウザのローカルストレージでそれを見つける。大きな問題は、スタイルを変更した場合です。ブラウザがスタイルを更新しないようにリフレッシュしてください。 style.lessは、localstorageから削除するか、サーバー上のlisting.lessをタッチした場合にのみ更新されます。

これは@importの性質ですか？ style.lessを更新するたびに、listing.lessに触れるか、localstorageから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]; 
    } 
    } 
}