有没有办法告诉less-css / gulp-less按原样保留@import规则

Question

我希望less编译器生成的css文件在文件开头包含@import指令。

即。鉴于此文件较少：

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

生成的CSS文件应如下所示：

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

似乎没有任何一个较少的导入指令的options有助于产生这个。还有其他办法吗？

更新：我正在使用gulp-less来编译较少的文件。这可能是该软件包的问题而不是自身的问题（@import (css) "external.css";没有给出所需的结果）。

Answer 1

更新：它似乎确实是一个没有堵塞的问题（或链中的其他一些库），因为有问题的代码实际上应该输出@import语句甚至是不使用(css)选项。 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。所以，这绝对不应该是Less编译问题。

是的，请尝试使用css之类的@import (css) "external.css";关键字。使用此关键字时，Less编译器将按原样输出import语句。

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

将编译为

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

Answer 2

正如 seven-phases-max 猜测的那样（在评论中），此问题不是由gulp-less引起的，而是由运行的css-minifier（gulp-clean-css）引起的在gulp汇编之后。

使用正确的clean-css选项（processImport: false）可以解决问题。