LessCSS stops processing styles - css

Question

I'm using Less in JS mode (less.js) the following way:
<link rel="stylesheet/less" href="assets/styles/less/bootstrap.less" media="all">
<script src="assets/scripts/libs/less-1.1.5.min.js"></script>
And after some page views, it stops processing the styles and gives a "cached" version. To make it re-parse the styles I have to clear browser cookies. Does anybody knows why is this? Is there any option to make it re-parse on every page view?
Thanks a lot!
UPDATE: Reviewing some of the library code, seems that it uses localStorage to store the stylesheets as a cache. It bases on file's last modified time to update that cache but for some reason it's not working properly because it's not taking my changes...

Answer 1

I just found a issue in GitHub for this. Quoting myself:
This happens to me also in 1.1.5. The script uses localStorage to store the stylesheets. Clearing your browser cache won't work. You must clear it's cookies (logging off all your accounts, %!#^#%) or doing localStorage.clear(). I use this before loading less.js (not using localStorage myself):
<script> /* Provisory for dev environment: */ localStorage.clear(); </script>
When going to production you just compile the stylesheets to .css

Answer 2

Nice find with the localStorage. The quickest solution, then, is to open up your browser's console and run the following command:
localStorage.clear();
Then refresh and you are set.

Answer 3

You can use the following to disable the localStorage cache:
<script>var less=less||{};less.env='development';</script>
<script src="path_to_less.js"></script>

Answer 4

The reason it caches it is because it takes time to generate the css files and that time can add up to a bad user experience if you have a lot of code to compile.
you could put this in your html documents:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
But that would disable caching of all resources not just your less files.

Answer 5

A better way of doing this would be by passing noCache=1 into the url to clear the browser localStorage when you are developing in less files then it sets a cookie to remember to clear it each time and then you could put noCache=0 to unset the cookie, this way the end user doesn't end up having their localStorage deleted when using your site and you can just leave it in.
$(document).ready(function () {<br>
if(window.location.href.indexOf("noCache=1") > -1) {<br>
$.cookie('noCache', '1', { expires: 1, path: '/' });<br>
localStorage.clear();<br>
}<br>
if(window.location.href.indexOf("noCache=0") > -1) {<br>
$.cookie('noCache', '0', { expires: 1, path: '/' });<br>
}<br>
if ($.cookie('noCache') == '1'){<br>
alert ("disabled Cache");<br>
localStorage.clear();<br>
}<br>
});<br>
<br>
you will need jquery cookie plugin for this to work

Answer 6

you can also add a unique parameter to prevent caching, like this for example if you are using php:
<link rel="stylesheet/less" href="assets/styles/less/bootstrap.less?v=<?= uniqid() ?>" media="all">