Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't get less.js to work

Tags:

css

less

I can't get less.js to work and I have no idea why. Heres the HTML i tried:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- CSS -->
        <link rel="stylesheet/less"  href="main.less" />

        <!-- Javascript -->
        <!-- <script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script> -->
        <script src="less-1.0.18.min.js" type="text/javascript"></script>

    </head>
    <body>
        <p>
            Lorum ipsum
        </p>
    </body>
</html>

And heres main.less:

p {
    color: blue;
}

The less-1.0.18.min.js file is downloaded from http://lesscss.googlecode.com/files/less-1.0.18.min.js. All files is in the same folder. I have no idea why this isn't working...

Tested in Chrome 12.0.742.100

Edit

Tried the lates less.js file (less-1.1.3.min.js). That one did also not work.

Okay now...

This works:

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

But only as normal css, no less specific markup.

This doesn't work at all:

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

Also, this isn't working:

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

What the hell? How do I get less to work?

Found the error

P.S.S. 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.

Soruce

like image 981
Knarf Avatar asked Jun 16 '11 12:06

Knarf


People also ask

How can I download LESS js?

The client-side compiler less. js can be downloaded from http://lesscss.org/. You can use less. js in the browser, which is a great tool to get you started with Less, although it should only be used for development.

Does LESS need to be compiled?

Using Less. js in the browser is the easiest way to get started and convenient for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using Node.

What is the purpose of LESS js?

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less. js, the JavaScript tool that converts your Less styles to CSS styles. Because Less looks just like CSS, learning it is a breeze.

How do you add LESS in HTML?

Using JavaScriptless extension and link it in your document using the rel="stylesheet/less" attribute. You are all set and can compose styles within the . less . The LESS syntax will be compiled on the fly as the page loads.


2 Answers

P.S.S. 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.

But what we could do is setting up a local testing environment using wamp (pc) or mamap (mac). It will work alright then.

like image 111
Vennsoh Avatar answered Oct 28 '22 15:10

Vennsoh


You can use the command-line switch -allow-file-access-from-files when starting chrome - it will permit less.js to access local less files.

like image 29
verglor Avatar answered Oct 28 '22 16:10

verglor