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

Question

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

即给出这个 less 文件：

@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; }

似乎 less import 指令的各种 options 中的 none 有助于产生这个。还有其他办法吗？

更新：我正在使用 gulp-less 来编译 less 文件。这可能是那个包的问题，而不是 less 本身的问题（@import (css) "external.css"; 没有给出想要的结果）。

Answer 1

更新： 它似乎确实是一个 gulp-less 问题（或链中的其他一些库），因为有问题的代码实际上应该输出 @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 (css) "external.css";
@import "globals.less";
a { 
  color: @linkColor; 
}

会编译成

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

Answer 2

正如猜测的那样（在评论中），这个问题不是由gulp-less引起的，而是由css-minifier引起的(gulp-clean-css) 运行在 gulp 编译之后。

使用正确的 clean-css 选项 (processImport: false) 解决了问题。

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