¿Por qué un archivo CSS importado se almacena en localstorage y no se actualiza como un archivo css vinculado?

Question

Archivos:

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

Herramientas:

• Firefox
• complemento de Firefox HttpFox para inspeccionar los encabezados http
• Chrome

Tengo un llamado listing.less archivo css que contiene lo siguiente:

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

Cuando llamo listing.less todo funciona bien, style.less es importado. Las solicitudes posteriores de listing.less dan como resultado una respuesta en caché 304. Esta bien. Sin embargo, el estilo importado.less no aparece como una respuesta en caché. En cambio, lo encuentro en el almacén local del navegador. El mayor problema es si realizo un cambio en style.less y luego pulso actualizar, el navegador no actualizará el estilo. Style.less se actualizará solo si lo elimino de localstorage o toque listing.less en el servidor.

¿Esa es la naturaleza de @import? ¿Debo tocar listing.less o eliminar style.less desde localstorage cada vez que deseo actualizar style.less? ¿Cómo se puede forzar style.less para actualizar?

Answer 1

Este es un problema conocido en LESS. Véase el número de github aquí: https://github.com/cloudhead/less.js/issues/47

Sé que no soluciona el problema directamente, hay una solución que aparece allí, poner la siguiente línea por encima de su importación less.js:

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

y cosas en general debería funcionar.

Answer 2

Este es el enfoque que uso ahora, porque incluso en el modo de desarrollo, me parece @imported CSS permanece en la memoria caché para siempre.

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