LESS CSS not working locally

Question

I really want to learn LESS but have had NO luck getting it to work at all. I would like to get it to work locally. Please help.

I just want to do a simple test. Here is my LESS code:

@color: red;

.header {
    color: @color;
}

h2 {
    color: @color;
}

And here is my HTML code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>LESS TEST</title>
    <link rel="stylesheet/less" type="text/css" href="style.less">
    <script src="less.js" type="text/javascript"></script>
</head>

<body>
    <div class="header"> <h2>This is a test</h2> </div>
</body>
</html>

So the header class should be red and also the H2 should be red. But they do not display with any styling on any browser. Please help!

Are you sure the `style.less` file is in the same folder as your HTML page? — Sébastien Renauld, May 15 '13 at 20:32
And if you're on Windows, you can use winless http://winless.org/ I would definitly go for precompiling! — Pevara, May 16 '13 at 18:17
[This](http://lesscss.org/#client-side-usage) will help. Make sure to link the all the stylesheets before linking `less.js`. Have you checked the JavaScript console? On Chrome, go to the webpage and click `Ctrl + Shift + J` — rassa45, Oct 05 '15 at 22:46

Régis B. · Answer 1 · 2016-03-21T07:15:49.140

4

Your code works perfectly, as shown in this screenshot:

enter image description here

Note that I downloaded a minified version of less.js locally prior to running this. I suggest you verify:

that your files are properly named and located: check for 404 errors in your web console (F12 in Chrome and Firefox).
that your files are being served by a webserver. Less files will not be served if you try to access them through at a file:///path/less.js URL -- Chrome gives me a "cross origin request" error.

edited Mar 21 '16 at 07:15

answered Jun 21 '13 at 09:17

Régis B.

10,092
6
54
90

Cross origin requests can be solved through sending Access-control headers. Using a CDN should work fine. – rassa45 Oct 05 '15 at 19:10
@ytpillai you're absolutely right. But I guess the OP is serving the static files from the filesystem. – Régis B. Oct 05 '15 at 21:55
@RégisB., in my application every thing are working but style.less CSS file is not showing in console when I am doing inspect element. Please help me. – Ishimdar Ahamad Dec 15 '16 at 19:08
@IshimdarAhamad this looks like a different problem. Please create a new question. – Régis B. Dec 16 '16 at 09:28
@RégisB., can you give me your email, I will send a small application. – Ishimdar Ahamad Dec 16 '16 at 09:55

score 2 · Answer 2 · answered Jan 16 '17 at 03:10

2

Disable cache in Chrome, worked in my case.

answered Jan 16 '17 at 03:10

Geraldo Magalhães

63
7

score 1 · Answer 3 · answered Mar 06 '14 at 18:27

I use WINLESS. It's free, it's easy to use and very powerful on minifying the code.

Download, install and open Winless;
Open the LESS file with the compliler and keep in mind that every time you save the LESS file, Winless will compile it into a CSS file;
Include the CSS file that result into your header.

You don't have to emulate an Apache server to use it.

Good luck!

score 0 · Answer 4 · answered Dec 19 '13 at 10:11

Windows Sever Add Mime Type Less or web.config file add line

        <staticContent>
        <mimeMap fileExtension=".less" mimeType="text/css" />
    </staticContent>

       <link type="text/css" rel="stylesheet" href="reset.css" media="all" />
    <link href="http://www.petshop.net.tr/less-ornek/stil.less" type="text/css" rel="stylesheet/less" media="all" />
    <script type="text/javascript" src="less-1.3.0.min.js"></script>

score 0 · Answer 5 · edited May 23 '17 at 12:16

0

if you are using chrome, take a look at this:

less.js not working in chrome

in short:

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.

edited May 23 '17 at 12:16

Community

1
1

answered Jun 19 '14 at 23:50

Taitu-lism

856
9
10

score 0 · Answer 6 · answered Feb 07 '15 at 14:14

0

You have to use a server to run the code. A simple way to run the code on MAC is using the python server

Do the following ,in terminal locate the folder containing the code then type in python -m SimpleHTTPServer 8000. in browser go to localhost:8000

answered Feb 07 '15 at 14:14

Gaurav_soni

6,064
8
32
49

LESS CSS not working locally

6 Answers6