less.js not working in chrome

Question

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?

no, its a link to the css or (.less file) [less.js info](http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/) — Jiew Meng, Jun 21 '10 at 13:21
I checked your code in both, Firefox and Chrome, both up to date and in both it is working; the only thing I noticed, in Chrome your background gradient is inverted. Which versions do you use? — codeporn, Jun 21 '10 at 13:33
oh yes, i had that prob also, its because i got the syntax wrong, u shld use `background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));` — Jiew Meng, Jun 21 '10 at 15:32
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
related http://webmasters.stackexchange.com/questions/50006/chrome-refused-to-execute-this-javascript-file — chharvey, Jul 03 '13 at 05:45

score 62 · Accepted Answer · answered Jun 21 '10 at 13:24

62

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.

answered Jun 21 '10 at 13:24

Lithium

5,102
2
22
34

This apparently effects Safari 6.0 (8536.25) as well. – David M. Aug 05 '12 at 01:22
2

Can this be solved by using --disable-web-security & -–allow-file-access-from-files ? EDIT: Nevermind, tried it with those parameters and it works. Ugh ! Should've read 2 rows lower :))) – lorddarq Dec 30 '12 at 16:53
This answer would have been better if it included at least one possible workaround for the problem! – Romeo Sierra Jul 26 '17 at 04:33

score 50 · Answer 2 · answered Sep 08 '11 at 15:47

50

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:

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

answered Sep 08 '11 at 15:47

Nathan Strutz

8,095
1
37
48

1

Amit - try http://superuser.com/questions/16750/how-can-i-run-an-application-with-command-line-arguments-in-mac-os – Nathan Strutz Nov 13 '11 at 05:15
7

The easiest way that I know of to start a local web server is to do python -m SimpleHTTPServer in your site's root. – Ryan N Jun 13 '12 at 05:26
I, too, recommend using a local web server. Try [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:37
yess adding switch to shortcut worked: create a new shortcut in Windows, right click -> Properties and set its target to : `chrome.exe -allow-file-access-from-files`, was a quick fix, but still web-server recommended – Mahesha999 Apr 23 '14 at 10:59

score 14 · Answer 3 · edited May 23 '17 at 10:31

14

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

Apple Script Editor

with following command

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

AppleScript

Then save as Application

save as Application

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

add to Dock

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

edited May 23 '17 at 10:31

Community

1
1

answered Feb 04 '12 at 11:24

I keep getting Syntax Error: Expected “"” but found unknown token. Any ideas?? – kthornbloom Dec 21 '12 at 15:23
1

The backslashes should be escaped. Should be `do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome -allow-file-access-from-files"` – Adam Stegman Jan 13 '13 at 22:00

Michael Johansen · Answer 4 · 2012-10-02T16:11:29.930

3

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.

edited Oct 02 '12 at 16:11

answered Jul 07 '12 at 21:51

Michael Johansen

4,688
5
29
47

`Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101` for me. :( – FRD Mar 18 '13 at 09:25
How do you get that verbosity from less? – Mbrevda Dec 02 '13 at 06:54
I got the verbosity automatically when Less was included client-side. It might have been removed in a later version of Less? (Haven't tested.) – Michael Johansen Dec 03 '13 at 10:30
Yes, it did worked for me too, but it is not compiled by less. How and where did you got this – AKS Mar 24 '14 at 12:43

Full-Stack Software Engineer · Answer 5 · 2014-08-11T16:31:24.467

3

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

edited Aug 11 '14 at 16:31

answered Aug 28 '12 at 22:43

Full-Stack Software Engineer

1,238
2
10
10

Claudio Oliva · Answer 6 · 2014-01-30T20:24:41.880

1

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.

edited Jan 30 '14 at 20:24

answered Jan 29 '14 at 19:19

Claudio Oliva

111
2
7

score 0 · Answer 7 · answered Oct 13 '12 at 08:44

0

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/

answered Oct 13 '12 at 08:44

Joshua Muheim

12,617
9
76
152

score 0 · Answer 8 · answered Jun 18 '19 at 12:20

0

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

answered Jun 18 '19 at 12:20

Davit Mkrtchyan

449
5
15

less.js not working in chrome

8 Answers8

Linked

Related