less.js not working in chrome

I noticed that less.js is working in firefox but not in Chrome, or is it because I made an error?

<link rel="stylesheet/less" href="css/style.less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}

even if i try html { background: red; } it still does not work in chrome am i making a mistake somewhere?

From the link you provided : Less.js browser script currently won’t work if you’re using Chrome and the path to your page starts with “file:///” due to a known Chrome issue.

Lithium is correct, there is a known Chrome issue with loading local javascript files. This is a security "feature" in Chrome. There are two workarounds that I know of:

1. Develop your local projects with a web server. You can install and use Apache very easily, though configuring takes some patience. If you are on Windows, you may be able to install IIS. When you do this, instead of double-clicking an HTML file, you will browse to it from http://localhost/

2. Add the command-line switch -allow-file-access-from-files to your shortcut and Chrome will allow you to load LESS.JS without a fuss.

I'm tempted to mention using a different version of the less converter, like the ruby lessc version, or one of the ports to PHP or .NET, but less.js is more current, and I think you should keep with it.

In case anybody else ever needs a quick solution for this on Mac OS X (tested on Lion)

"Walkthrough for dummies"

---

---

Special thx to Lithium, Nathan Strutz + the guys from this post on Superuser

---

---

Create an AppleScript

with following command

---

do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome-allow-file-access-from-files"

---

Then save as Application

(I put this into my dock and added an alternative Chrome icon for fast access)

IMPORTANT: Chrome needs to be closed in order for this script(App) to work.

Actually, contrary to the accepted answer this does work fine. I'm on Chrome 19, Mac OS X, context is a Chrome extension. I experienced the same issue. I started to experiment with different ways to include it, switching out text in the rel, type, href and so on.

This works, the key is href="css/styles.css (use .css, not .less):

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

Styles are nicely applied and the JavaScript console in Chrome has the following to say (slightly stripped for clarity):

less: parsed /css/styles.css successfully. less-1.3.0.min.js:8
less: css generated in 33ms

I know one aren't supposed to use compiled CSS client side, but in the context of a Chrome Extension there is no alternative other than regular CSS (eww). You can't request the stylesheet from a server either because the client will be offline every now and then.

I recommend you to use a compiled vesion of the LESS file. You can do this for example in windows with WinLess or SimpLESS.

I'm using winless. It automatically compiles my .css files when I save my code.

You also need to run your example on a webserver like IIS / tomcat / Jboss

I hope it helps

Editing the link tag to something like this will make it work with any browser ONLY if you are not using Less syntax within the file:

<link rel="stylesheet" type="text/less" href="css/styles.less" />

So why would you use a plain css in a less file? No idea, but just so you know.

I found this small app to be very useful to circumvent the file:// problem: Anvil for Mac. One minute and it's upp and running as many sites as you like through URL's like http://myapp.dev.

http://anvilformac.com/

If you don't want to use -allow-file-access-from-files , or run wamp, lamp, or etc. you can use this extension it helped me a lot. the link