use Less without localhost / server, client-side, browser

Question

I'm trying to work with bootstrap for the first time and so far it works ok.

However i'm at the media queries that require Less. http://getbootstrap.com/css/#grid-media-queries

Right now i have this in the header:

<link rel="stylesheet" type="text/css" href="css/custom.less">
<script type="text/javascript" src="js/less-1.7.4.min.js"></script>

And this is the less file:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { 
    background-color: red;
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { 
    background-color: green;
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { 
    background-color: blue;
}

I get the following error:

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "file:///Users/doekewartena/Downloads/bootstrap-3.2.0-dist/css/custom.less".

Which is related to this: LESS css variable not working

What i'm wondering. Does less needs to run on a server / localhost, and if so why?

I use the chrome browser.

Answer 1

It can run on the client-side/browser as it is written in pure JavaScript (using less.js). Read the Getting started tutorial about client-side usage.

Copy and paste code from that page as writing it yourself is hazardous.

Common mistakes are:

• The link rel must be rel="stylesheet/less" and NOT rel="stylesheet" !
• Respect the load order as the less JavaScript requires the .less stylesheets files to be loaded before it runs in order to process them !
• Of course make sure the file paths are correct...

I recommend to test with the simplest scenario possible (one variable, one less file).