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.

Correct link to a Less file should look like ``. Though it should work the way you wrote it anyway ("Resource interpreted as Stylesheet but transferred with MIME type text/plain" is actually a warning not a error). Either way, it would be helpful if you'd specify more details about your setup (specifically the browser you use since `file://` serving [heavily depends](http://stackoverflow.com/a/18531239/2712740) on this). — seven-phases-max, Aug 02 '14 at 12:56
possible duplicate of [Resource interpreted as Script but transferred with MIME type text/x-c++](http://stackoverflow.com/questions/11562521/resource-interpreted-as-script-but-transferred-with-mime-type-text-x-c) — seven-phases-max, Aug 02 '14 at 13:02
And it is possible to run without a webserver. This is not clear in the other topics flagged here as possible duplicates. — clankill3r, Aug 02 '14 at 13:59

Christophe Roussy · Accepted Answer · 2014-08-12T11:39:20.543

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

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

1 Answers1