LESS CSS minimal setup failure

Question

Looking at the quick start on the official site I wrote:

less.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet/less" type="text/css" href="style.less" />
    <script src="less-1.1.3.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>foo</h1>
  </body>
</html>

style.less

@color: red;

h1 {
  color: @color;
}

both locally, and all I get is (from Google Chrome console):

XMLHttpRequest cannot load file:///home/cyrus/test/style.less. Cross origin requests are only supported for HTTP.
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101
    r
    o
    n
    d.refresh
    (anonymous function)
    (anonymous function)

WORKAROUND:

This answer shows a way to overcome this:

$ google-chrome -allow-file-access-from-files

On a note for anyone else ending up here: I've gotten the same error on my web host's web server. It was erroneously sending empty responses because the `.less` file/mime type was unknown. Configuring the web server to properly serve .less files fixed it. (It was not a cross-domain request, all `.js`/`.less` files were served from the same folder.) — Joel Purra, Jun 24 '12 at 19:41

score 17 · Accepted Answer · edited May 23 '17 at 12:24

17

The less.js script currently doesn't work if you’re using Chrome and the path to your page starts with “file:///”.

There is also a SO question with the same info here: less.js not working in chrome

edited May 23 '17 at 12:24

Community

1
1

answered Oct 29 '11 at 23:22

nheinrich

1,803
11
17

Totally missed that, I was searching in the wrong direction. Are there any (lightweight) workarounds tho get it work locally? – cYrus Oct 29 '11 at 23:31
I do a lot of Rails development so I use [pow](http://pow.cx/) to serve my sites (it can serve static sites as well as Rails sites). This gives the "site" a domain to reference and allows the request to go through. Basically anything that would serve your site locally would work (i.e. apache, passenger, mamp). – nheinrich Oct 29 '11 at 23:38
Yep, but those solutions aren't lightweight (in my own circumstances). I'll probably use another browser for local development. Thanks. – cYrus Oct 29 '11 at 23:43
Perhaps not lightweight either, but I use [tag:node.js] and the [Connect library's `.static()` method](http://www.senchalabs.org/connect/static.html) as a [simple dev web server for static material](http://stackoverflow.com/a/8427954) to be able to use less.js (and avoid any other potential `file:///` weirdness). – Joel Purra Jun 24 '12 at 19:33

score 1 · Answer 2 · answered Feb 06 '13 at 20:21

1

Another way is use script from CDN. For example: http://cdnjs.com/

For me this solve that problem.

answered Feb 06 '13 at 20:21

WooCaSh

5,070
3
33
54

score 0 · Answer 3 · answered Mar 31 '14 at 18:02

0

The best way to load this locally is to run the local site in xampp or wamp, which gets around all of that. You will no longer get these errors when doing this. This would be the best route for this issue.

answered Mar 31 '14 at 18:02

DEVPROCB

453
2
4
18

LESS CSS minimal setup failure

3 Answers3