M4N M4N - 11 months ago 50
CSS Question

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

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

Answer Source

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.