Q: use Less without localhost / server, client-side, browser 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.

A: 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).
