Less.js not working in chrome

Question

I noticed that less.js works in firefox but not in Chrome, or is it because I made a mistake?

<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; } html { background: red; } it still does not work in chrome, am I making an error somewhere?

Answer 1

From the link you provided: The Less.js script browser currently does not work if you use Chrome, and the path to your page starts with "file: ///" due to a known Chrome issue.

Answer 2

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

• Design your local projects on a web server. You can easily install and use Apache, although customization requires some patience. If you are on Windows, you can install IIS. When you do this, instead of double-clicking on the HTML file, you will go to it from http: // localhost /

• Add the command-line -allow-file-access-from-files to your shortcut and Chrome will let you download LESS.JS without any fuss.

I am tempted to mention using a different version of a less converter, such as the ruby ​​lessc version, or one of the ports for PHP or .NET, but less.js is more relevant, and I think you should stick with it.

Answer 3

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

"Walkthrough for Dummies"

---

---

Special thanks to Lithium , Nathan Struz + guys from this post in superuser

---

---

Create AppleScript

using the following command

---

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

---

Then save as an application

(I put this in my dock and added an alternate Chrome icon for quick access)

IMPORTANT: Chrome must be closed for this script (application) to work.

Answer 4

Actually, contrary to the accepted answer, this works fine. I am in Chrome 19, Mac OS X, context is a Chrome extension. I experienced the same problem. I started experimenting with different ways to enable it by disabling text in rel, type, href, etc.

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> 

The styles are beautifully applied, and the JavaScript console in Chrome says the following (slightly legible for clarity):

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

I know that one of them should not use the compiled CSS client side, but in the context of the Chrome extension there is no alternative other than regular CSS (eww). You cannot request a stylesheet from the server either because the client will be offline from time to time.

Answer 5

I recommend using the compiled vesion of the LESS file. You can do this, for example, on Windows with WinLess or SimpLESS.

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

You also need to run your example on a web server, e.g. IIS / tomcat / Jboss

I hope this helps

Answer 6

Editing the link tag for something like this will work with any browser ONLY if you are not using less syntax in the file:

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

So why would you use plain css in a smaller file? I don’t know, but so that you know.

Answer 7

I found this small application very useful to get around the file: // problem: Anvil for Mac. One minute, and this is upp and as many sites work as you like through the URL, for example http://myapp.dev .

http://anvilformac.com/

Answer 8

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