1

I am new to LESS and I'm using less.js as to my development environment. The problem is, when I declare a variable, it doest not working like nothing happen.

@bground: #c0c9c8;
body{
    background-color: @bground;
}

As you can see, the @bground does not pass it value. If I put direct value it will apear which is proof the .less is set up correctly. I'm using latest version of Chrome and running locally on Mac. Everything is working except variable. Without variables in work, I cannot use the LESS feature.

Firdaus Adib
  • 11
  • 1
  • 3
  • 3
    Just to make sure, do you first include the CSS `` and then the javascript ``on the page in question? – Henrik Ammer Sep 04 '12 at 19:13
  • @HenrikAmmer Yes I did. The stylesheet first and the Less.js after that. – Firdaus Adib Sep 04 '12 at 19:35
  • Do you use the console in Chrome and/or Firebug in Firefox? If so, do you see any errors in the console regarding if something went wrong? – Henrik Ammer Sep 04 '12 at 19:38
  • There are an error : Resource interpreted as Stylesheet but transferred with MIME type text/plain: "file://localhost/Users/Firdaus/Documents/WebProject/HackerHiresV2/less/main.less". – Firdaus Adib Sep 04 '12 at 19:49

2 Answers2

2

If you`re using apache, create an .htaccess file in your root folder, if you already have one, just add this line:

AddType text/css .less

This will tell apache to send the right content-type header for the .less file

Evandro Silva
  • 1,392
  • 1
  • 14
  • 29
  • This is the error I found : – Firdaus Adib Sep 04 '12 at 19:46
  • It is solved. Before this, I'm using direct file:// but there are no error in my console. So what I did is I tested on server by upload it in live server and it works like a charm. So the LESS.js need to work with XMLHttpRequest which is direct file:// dont have. Now I'm using MAMP and I marked this as solved. Thank you gentleman! – Firdaus Adib Sep 04 '12 at 20:32
0

Please make sure you loaded less js file in your page to accommodate less file.

use

<script src="//cdn.jsdelivr.net/npm/less" ></script>

for that.

Also while loading your less file use following syntax

<link rel="stylesheet/less" type="text/css" href="dist/css/<your less file>.less" />

make sure you use rel and type attributes on the tag, as mentioned.

Alessio
  • 3,404
  • 19
  • 35
  • 48
Jijo thomas
  • 1
  • 1