Is there a way to tell less-css/gulp-less to leave an @import rule as-is

Question

I'd like the css file produced by the less compiler to contain an @import directive at the beginning of the file.

Ie given this less file:

@import "external.css" /* this import directive should be left as is */
@import "globals.less"
a { color: @linkColor; } /* defined in globals.less */

the resulting CSS file should look like this:

@import "external.css"
a { color: #00a; }

It seems that none of the various options of the less import directive helps producing this. Is there any other way?

---

Update: I'm using gulp-less to compile the less files. It might be a problem with that package and not with less itself ( @import (css) "external.css"; doesn't give the desired result).

Answer 1

Update: It does seem to be a gulp-less problem (or some other library in the chain) because the code in question should actually output the @import statement as-is even without using the (css) option. The Less compiler seems to be capable of reading the file extension and if it is css then it just leaves the @import directive as-is . So, this should definitely not be a Less compiler issue.

---

Yes, try using the css keyword like @import (css) "external.css"; . When this keyword is used, the Less compiler would output the import statement as-is.

@import (css) "external.css";
@import "globals.less";
a { 
  color: @linkColor; 
} 

would compile to

@import "external.css";
a {
  color: #00a;
}

Answer 2

As seven-phases-max guessed (in the comments), this issue was not caused by gulp-less , but by the css-minifier ( gulp-clean-css ) which ran after the gulp compilation.

Using the correct clean-css options ( processImport: false ) solves the problem.