Question

Files:

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

Tools:

• 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?

Answer 1

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.