css - 有没有办法告诉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; }

似乎 less import 指令的各种选项都没有帮助产生这个。还有其他方法吗？

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

score 3 · Accepted Answer

更新：它似乎确实是一个无问题的问题（或链中的一些其他库），因为@import即使不使用该(css)选项，有问题的代码实际上也应该按原样输出语句。Less 编译器似乎能够读取文件扩展名，如果是，css那么它只会将@import指令保持原样。所以，这绝对不应该是一个 Less 编译器问题。

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

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

将编译为

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

score 1 · Accepted Answer

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

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

2 回答 2