Sublime Text 2, LESS and jsLint

Question

I am trying to to compile a LESS file into a CSS one (both located in the same directory, same name).

The issue is that i keep getting:

1 A css file should begin with @charset 'UTF-8';

@import "color-theme.less"; // Line 4, Pos 2  #2 Stopping. (0% scanned).
 // Line 4, Pos 2 [Finished in 0.3s]

I modifeid my .LESS file according to that, but to no avail. I even entered a simple statement such as:

body{
  background-color: red;
}

and it still won't compile. Important note is that yesterday it was working, today it doesn't. I'm not sure what might've caused this.

I am using less2css, jsLint with Sublime Text 2.

score 1 · Accepted Answer · answered May 11 '13 at 23:12

The error message "A css file should begin with @charset 'UTF-8';" comes from JSLint.

It doesn't make a lot of sense to run JSLint on machine-generated CSS code. On the one hand it's going to find a lot to complain about (for example, whitespace); and on the other hand, the cleanliness of that code isn't very important – what matters most is the cleanliness of your handwritten LESS code instead.

Fwiw, you should be able to fix the charset warning by placing @charset 'UTF-8'; at the start of your LESS file – that should carry through to the generated CSS. It works in this simple example:

@charset 'UTF-8';
body {
  background-color: red;
}

If you paste that into http://lesstester.com/, you'll get this CSS output:

@charset 'UTF-8';
body{background-color:red;}

But this already showcases how it's a losing battle: there's no charset warning anymore, but JSLint complains about the whitespace on the second line instead.

IMO your best option is to just ignore any JSLint warnings on the generated CSS file. If the Sublime JSLint plugin lets you designate certain files to ignore/exclude from linting automatically, even better.

Sublime Text 2, LESS and jsLint

1 A css file should begin with @charset 'UTF-8';

1 Answers1