Perché un file css importato viene memorizzato in localstorage e non viene aggiornato come un file css collegato?

Question

Files:

• listing.less (text/css)
• style.less (text/css)

Strumenti:

• Firefox
• addon Firefox HttpFox per ispezionare le intestazioni http
• Chrome

Ho un nome listing.less file CSS che contiene quanto segue:

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

Quando chiamo listing.less tutto funziona bene, style.less viene importato. Richieste successive per listing.less produce una risposta in cache 304. Va bene. Tuttavia, lo style.less importato non viene visualizzato come risposta memorizzata nella cache. Invece, lo trovo nel localstage del browser. Il problema più grande è che se apporto una modifica a style.less, dopo aver fatto clic su Aggiorna il browser non aggiornerà lo stile. Style.less verrà aggiornato solo se lo elimini da localstorage o tento list.less sul server.

È questa la natura di @import? Devo toccare list.less o cancellare style.less da localstorage ogni volta che voglio aggiornare style.less? In che modo style.less può essere forzato ad aggiornare?

Answer 1

Questo è un problema noto in LESS. Vedere il problema github qui: https://github.com/cloudhead/less.js/issues/47

Lo so che non risolve direttamente il problema, c'è una soluzione elencata là, inserire la seguente riga sopra la less.js importazione:

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

e le cose dovrebbe generalmente funzionare.

Answer 2

Questo è l'approccio che uso ora, perché anche in modalità sviluppo, trovo che @imported CSS rimane memorizzato nella cache per sempre.

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]; 
    } 
    } 
}