Skip to content

Instantly share code, notes, and snippets.

@attaboy
Created November 7, 2011 21:40
Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save attaboy/1346280 to your computer and use it in GitHub Desktop.
Save attaboy/1346280 to your computer and use it in GitHub Desktop.
Destroy the localStorage copy of less.js client-side-generated CSS
// 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];
}
}
}
@attaboy
Copy link
Author

attaboy commented Nov 8, 2011

You could do that, sure. Or put it in a file with a .js extension and include it as a script tag with a src attribute pointing to the file. What I've written is just a function though; it also needs to be called once to execute, which you could do below or somewhere else. For example, if your stylesheets are in a 'css' directory off the root, call it like this:

destroyLessCache('/css/');

@TwItChDW
Copy link

Ok I still can not get this to work. Here is my situation: I have my whole ftp directory on my remote server (a shared server host) mapped to a drive on my local machine. That way when I save a file on my local machine its actually just saving it via ftp. Now on my server I am working in a sub directory of the root of my subdomain ( x.xxx.net/workingdir/ ). Now in my html I have called less.js which I have modified and changed the reference to localhost with my remote server address. That was the only way to get the main less file to refresh automatically in the first place even with including the whole ( less.env = "development";
less.watch(); ). The main less file refreshes fine with this setup, but any of the imported files do not. I have included your code wrapped in separate script tags within my file and still no joy.

I should also note that if I open the file via file:///E:/x.xxx.net/ etc it all works just fine even without your code.

@attaboy
Copy link
Author

attaboy commented Nov 11, 2011

If you want them to refresh without reloading the page, you'll have to make this script run repeatedly, perhaps using setInterval. It should work when reloading the page though.

@PickleChops
Copy link

Thanks for this.

@MatthewEppelsheimer
Copy link

I just got started with Twitter Bootstrap today and immediately ran into this, so thanks! Considering how far back this has been plaguing people, I'm surprised this hasn't been addressed in the code yet, or at least in the official docs.

@kristofferdarj
Copy link

<script>var less = {env: "development"};</script> in head before less is included should do the trick as well right? At least it gives you the parse errors written out

@xmf
Copy link

xmf commented Feb 20, 2013

@kristofferdarj, your solution worked perfectly for me - thanks :)

@cschneider271
Copy link

Alright, I feel like a dummy but I keep getting javascript erros when trying to drop that in place. Just to be completely transparent I am using WordPress, hence the lengthy path to the CSS file.
function destroyLessCache(pathToCss) { // e.g. '/css/' or '/stylesheets/'

so if I change pathToCss to something like this:
function destroyLessCache('/wp-content/themes/themeName/library/css/') { // e.g. '/css/' or '/stylesheets/'

it throws an error saying:
Syntax error: missing formal parameter

and it points to the spot between the first ' and the /

Any ideas? if I just change it to pathToCss it works fine and doesn't throw the error but it doesn't clear out localstorage

@jasonrhodes
Copy link

Strangely, Google Chrome seems to aggressively cache the Less files even with { env: "development" } set. @jenwachter and I have had no luck figuring out why.

@shankarcabus
Copy link

I'm with the same problem in the Chrome! After the version 29 update, this script stopped working.
For now, I disabled the cache of Chrome: Devtools > General> Disable cache

@ianferrell
Copy link

Anyone have a better solution than this? I'm running chrome with the cache disabled, but ideally the development environment should work as expected.

@yllumi
Copy link

yllumi commented Aug 27, 2014

I've tried this code, but my template still using the less files. The error shown "Uncaught ReferenceError: less is not defined". Anyone can help? It is frustating hahaha~

@abcarroll
Copy link

I've included this modified / improved version:
https://gist.github.com/nezzario/8c96eb0cbfce280e6bf6

In my project here:
http://www.github.com/nezzario/kickoff

Thanks a ton for this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment