LESS: Unrecognised input

Question

I'm trying to learn less with the help of Web Essentials 2012.

Right from the start, this LESS code:

@main-color: red;

.mega-warning {
    font-size: 24px;
    color: @main-color;
}

is giving a compile error "LESS: Unrecognised input" and the compilation stops. When i declare the variable @main-color inside the .mega-warning class scope everything works:

.mega-warning {
    @main-color: red;
    font-size: 24px;
    color: @main-color;
}

What am i missing?

had a similar problem doing @main-color = red insead of using : doesn't look like your code has this problem tho. — Bart Calixto, Aug 12 '13 at 21:17
I had a similar problem with `@media (max-width: 20rem) // some comment here\n{`. Putting the opening bracket before the comment fixed the issue. — Trevor, Dec 31 '14 at 00:21

score 19 · Accepted Answer · answered Aug 16 '13 at 14:11

19

I'm struggling with the very same issue. Looks like Web Essentials 2012 v2.9 for some reason is not very happy about *.less files starting with variable declaration. Here is my workaround:

html{}

@main-color: red;

.mega-warning {
    font-size: 24px;
    color: @main-color;
}

Strangely enough things work absolutely fine when using standalone lessc 1.4.2 compiler (which is included in WE2012 2.9 as per changelog). I've sent an email to the author of Web Essentials extensions and posted him a link to this question, so hopefully he'll address it pretty soon.

answered Aug 16 '13 at 14:11

2ooom

1,760
1
23
37

The issue is still there with VS 2012 Update 4 and latest WE (for the moment). This is quite bad :(. – Den Dec 09 '13 at 14:24
@2ooom This is still happening.. not just with variable declaration, but anything starting with `@` – vfioox Sep 15 '22 at 10:39

score 9 · Answer 2 · edited May 23 '17 at 12:32

9

Save less files with encoding "UTF-8 without BOM". This approach was proposed in the post VS 2012 Web Essentials Less Compile Error

edited May 23 '17 at 12:32

Community

1
1

answered Nov 20 '13 at 08:05

Warlock

7,321
10
55
75

score 0 · Answer 3 · edited Aug 10 '15 at 20:31

0

Try this Where you have added reference to less file:

rel="stylesheet/less"

With this your reference will look like

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

Download less.js and add the <script> tag referencing it in the <head>. The css <link> should come before the <script>.

edited Aug 10 '15 at 20:31

Jacob Ford

4,553
5
27
42

answered Aug 12 '13 at 05:45

Abhishek Jain

2,597
1
18
12

I'm not adding a reference to the less file, the Web Essentials plugin generates a css file on the server side and that's where the issue comes from. I'd like to avoid client side preprocessing. – Dante Aug 12 '13 at 08:14

score 0 · Answer 4 · answered Aug 07 '14 at 03:14

I had this issue in VS / Web Essentials 2013. My fix was to recreate the .less file using a template. I had originally just changed the extension from .css to .less, but apparently that doesn't work. So use the Visual Studio template for a .less file instead.

I'm not positive where that .less template came from though, it might have come with Web Essentials, or it may have come in the SideWaffle template pack.

LESS: Unrecognised input

4 Answers4