Quick tip: LESS.js in development and watch mode

If you run LESS.js in a HTML5 browser it will use local storage to cache the generated CSS. Great for normal visitors, but frustrating when you’re developing since you won’t immediately see the changes you made to the script.

Luckily the following lines of javascript will load less.js in development and watch mode. In development mode CSS won’t be cached and the watch mode should auto refresh your CSS when you save your .less file (so no browser refresh is needed).

<script type="text/javascript">
     less.env = "development";
     less.watch();
</script>

Just remember to remove the code when the site goes live. You can always enter the lines into your javascript console if you need to test something.

Unfortunately for me the watch mode doesn’t seem to work if you work online.

11 Responses to Quick tip: LESS.js in development and watch mode

  1. Thomas says:

    The watch mode doesn’t seem to be picking up the development setting.

    A quick fix:
    * open the less.js file
    * ctrl+f localhost
    * change localhost into yourwebsite in the condition ( ||location.hostname==”localhost” )

    Note: you dont need to write “less.env = “development”;” anymore, but this also means you cant turn it off without ctrl+f’ing yourwebsite and changing it back to localhost… As I said, this is a quick fix.

  2. Great tip! I’m definitely going to use that! Thanks Thomas!

  3. vanburg says:

    There’s smarter way to workaround watch on dev hosts (if it’s not ‘localhost’ host name 🙂

    // Force init value of less.env var
    var less = { env: ‘development’ };
    // Less itself

    // Watch
    less.watch();

    Also, i recommends to suppress logging of access for *.less files in dev server. Example for nginx:

    location ~ \.less$ {
    log_not_found off;
    access_log off;
    }

  4. Pingback: Auto-reloading stylesheets with LESS.js in development mode | Nagy Gábor

  5. Abban says:

    Good tip Vanburg, thanks!

  6. Pingback: LiveCss.js: refraichir les CSS sans recharger la page | Sam & Max: Python, Django, Git et du cul

  7. Takeshi Goda says:

    According to the official website, less can work in watch mode. To enable it, append ‘#!watch’ to the browser URL, then refresh the page.

  8. Denis says:

    Thomas,
    Thanks you, much!

  9. Shaz3e says:

    but for me working on localhost appending “#!watch” is not working nor either on my website 😉

  10. Shaz3e says:

    either the quick tips not working as well.

    less.env = “development”;
    less.watch();

  11. Geoff Hing says:

    @Vanburg, that worked great for me.

Leave a Reply

Your email address will not be published. Required fields are marked *