Why does an imported css file get stored in localstorage and not refresh like a linked css file?

Files:

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

Tool开发者_开发技巧s:

• Firefox
• Firefox addon httpFox for inspecting http headers
• Chrome

I have a css file named listing.less that contains the following:

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

When I call listing.less everything works fine, style.less is imported. Subsequent requests for listing.less results in a 304 cached response. That's fine. However, the imported style.less doesn't show up as a cached response. Instead, I find it in the browser's localstorage. The bigger problem is if I make a change to style.less then hit refresh the browser will not update the style. The style.less will refresh only if I delete it from localstorage or touch listing.less on the server.

Is that the nature of @import? Do I need to touch listing.less or delete style.less from localstorage every time I want to update style.less? How can style.less be forced to refresh?

This is a known issue in LESS. See the github issue here: https://github.com/cloudhead/less.js/issues/47

I know it doesn't solve your problem directly, there is a workaround listed there, put the following line above your less.js import:

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

and things should generally work.

This is the approach I use now, because even in development mode, I find @imported CSS stays cached forever.

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