less.js not working in chrome

Solution 1:

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.

Solution 2:

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.

Solution 3:

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.

Solution 4:

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.