4

我很难找到解决这个问题的方法。我有一个app.less仅包含@import语句的较少文件。现在我想生成一个包含所有导入的less文件的单个less文件，因为我想将它发送给客户端以在那里编译它（是的，我有理由这样做）。

所以 less 文件不应该在 grunt build 步骤中编译，而只是连接起来，这样客户端就不必加载几个 less 文件。我觉得这是一个在客户端编译时也应该出现的用例，但我找不到单一的解决方案。我不在乎连接是否发生在grunt-contrib-less任何其他工具上。

4

2 回答 2

7

LESS 文档 说：

使用@import（内联）包含外部文件，但不处理它们。

请参阅：导入 At-Rules和@import（内联）

例如，您可以创建新文件并使用关键字concatenate.less导入.less文件。inline然后，如果您处理它，它将完全像连接一样工作，不会处理任何 CSS。

连接.less

@import (inline) "file1.less"
@import (inline) "file2.less"
@import (inline) "file3.less"

并像以前一样使用您的 Grunt 任务，只需将输出文件扩展名重命名.less为 。测试它，应该给你你想要的。

嵌套导入

正如@seven-phases-max 指出的那样，在这种情况下嵌套导入将成为问题。

解决方案是grunt-includes。

  • 使用grunt-includeswithincludeRegexp选项创建列出的文件，concatenate.less其中包含已导入的 LESS 文件到其他文件夹。
  • 更改concatenate.less该文件夹的文件路径。
  • 正常运行 LESS 编译 Grunt 任务。
于 2015-08-04T17:22:01.353 回答
4

如果有人正在使用 gulp，

您可以按照@Rene Korss 的建议创建concatenate.less，并使用与编译less 相同的命令。

Less 输出 concatenate.css 文件名，这在我们的例子中会产生误导，所以我使用gulp-rename来命名我想要的文件名。

var src = 'path-to-concatenate-less-file';
var destination = 'path-to-destination';
gulp.task('concatenate-styles', function () {
    var compile= gulp.src(src)
    .pipe(less())
    .pipe(rename('concatenate-all.less'))
    .pipe(gulp.dest(destination))
    .pipe(notify("Saved file: <%= file.relative %>!"));
    compile.on('error', console.error.bind(console));
    return compile;
});

concatenate.less 的示例：

@import (inline) "general.less";
@import (inline) "typography.less";
于 2016-03-05T18:17:34.333 回答