Rob Biermann Rob Biermann - 7 months ago 17
Javascript Question

Loading less.min.js cdn results in blank page

When trying to implement .less on my page, by adding the tag:

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>


I've tried this on different pages(so not content related), tried it on the top of the page and the bottom of the page, also had the oppertunity to try it on both mac and windows, but I always get a blank page, when I remove it, it's fine again, but I would like to start using it, what am I doing wrong?

CDN source: http://lesscss.org

Answer

The issue is caused by the async option being set to false which makes the script add display: none to the <body> tag styling while the LESS files are being parsed.

Without any LESS files to parse on your page, the script never finishes and therefore never removes the display: none. To resolve the issue, either add some links to your LESS files to the page, or set the async option to true before the script is loaded like so:

    <script>
      less = {
        async: true
      };
    </script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>