Wednesday, January 11, 2012

Eliminate the cache for LESS Stylesheets

If you are using Bootstrap and LESS, the “Dynamic Stylesheet Language”, then you may have had the experience of editing your .less files, reloading your browser, and not seeing your changes.

And then you check that you are not including the .css file, but are actually including the .less file plus running the javascript to interpret the .less file. But you did do that correctly and your changes are still not showing up when you reload your browser.

It turns out that the javascript stores a cached copy of your stylesheet into Local Storage in your browser. Take a look:


I don’t really understand why the caching is there to begin with. I only do the dynamic interpretation of the .less files while in development. For production I will compile everything into a .css file.

I favored the quickest way to work around this after looking at some discussion online. I just pasted a snippet of javascript into the footer of my page, just before the closing </body> tag. The snippet is a slightly edited version of code found on github. Here is the snippet to paste into your page:

<script type="text/javascript">
    function destroyLessCache(pathToCss) { // e.g. '/css/' or '/stylesheets/'
      if (!window.localStorage ) {
      var 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];


Be sure to change the string ’/css/’ to be the path to where your bootstrap directory lives.

Also do not forget to remove this code when you go to production. (Yes, I know it is not ideal to have manual tasks like this upon code releases, but hey, I just need to get my .less file working once! Plus I am  documenting my code snippet here for next time I am in this soup.)