1

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

M4N
  • 94,805
  • 45
  • 217
  • 260
  • What's the problem with importing `external.css` giving the output without LESS processing? – Marcos Pérez Gude Sep 22 '16 at 11:47
  • Reading the [manual: `@import "foo.css"; // statement left in place, as-is`](http://lesscss.org/features/#import-directives-feature#import-directives-feature-file-extensions), shouldn't `@import "external.css"` already be *left as is*? Maybe it's a bit picky with regards to the closing `;`? – Yoshi Sep 22 '16 at 11:49
  • 1
    @Yoshi: It is picky with regards to the closing `;` but in that case it would give a syntax error during compilation. When the `css` keyword is used, it would leave the import statement as-is (from v1.4 upwards). – Harry Sep 22 '16 at 11:57
  • @Yoshi: I read that part of the manual, but it doesn't work. Maybe it's a problem of gulp-less? – M4N Sep 22 '16 at 12:07
  • @M4N: Just to help in my search, can you let me know what happens when the `@import` is used without any options and with the `(css)` option? Does it give any errors (or) does it put the entire content into the file (or) ? – Harry Sep 22 '16 at 12:37
  • @Harry: using `(css)` or `(inline)` or no option has no effect. The contents of external.css is always included in the resulting css file. – M4N Sep 22 '16 at 14:12
  • @M4N: Are you including any libraries like this one in your build process - https://www.npmjs.com/package/gulp-cssimport (these seem to replace the import statements with actual content)? – Harry Sep 22 '16 at 14:46
  • @Harry: no, I have gulp-less, gulp-clean-css and gulp-sourcemaps only – M4N Sep 22 '16 at 14:55
  • @M4N: Hmm, I don't have any other updates then :( Guess we will have to wait for somebody else to come and answer. I am leaving my answer as-is because there is no Less question for leaving the import statement as-is either. – Harry Sep 22 '16 at 14:56
  • It would be helpful if you'd posted you `gulp`-script. I'm pretty sure the issue has nothing to do with Less at all and it's something in your `gulp` toolchain doing this (e.g. some css-minfier for example). – seven-phases-max Sep 26 '16 at 13:16
  • @seven-phases-max: that was it! The `@import` was processed/resolved by the gulp-clean-css task following the less compilation. If you post as an answer, I'll mark it as the accepted answer. – M4N Oct 01 '16 at 14:27

2 Answers2

3

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;
}
Harry
  • 87,580
  • 25
  • 202
  • 214
  • But this will produce the code in `external.css` will output "as-is", but not leave the `@import` sentence – Marcos Pérez Gude Sep 22 '16 at 11:49
  • Sorry, I don't get you @MarcosPérezGude. Please try at lesscss.org :) – Harry Sep 22 '16 at 11:50
  • You're right, I'm guessing that the compiler would include the inner code on `external.css` into the final result. But it's fine. Thank you :) – Marcos Pérez Gude Sep 22 '16 at 12:02
  • That's fine @MarcosPérezGude. I understand what you mean now. – Harry Sep 22 '16 at 12:03
  • Unfortunately, this doesn't work for me. See updated question - maybe it's a problem in gulp-less. – M4N Sep 22 '16 at 12:08
  • Probably yes @M4N. Does this thread help you - http://stackoverflow.com/questions/29727449/import-css-file-in-less-using-nodejs-gulp. The comment seems to indicate that it works only for `inline` (which is different behavior) but give it a try and see what happens. – Harry Sep 22 '16 at 12:09
  • @M4N: I've done a bit of searching and couldn't find any related gulp-less issue threads/fixes. I've never used gulp-less and so don't know much about it. I'll update the answer if I manage to find any relevant info. – Harry Sep 22 '16 at 12:20
1

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.

Community
  • 1
  • 1
M4N
  • 94,805
  • 45
  • 217
  • 260
  • Ah ok, that's a similar plugin to the gulp-cssimport that I linked in my comment earlier. Good that you've found the reason. – Harry Oct 01 '16 at 15:47