csslessgulp-less

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


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

I.e. 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).


Solution

  • 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.