Question

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

因此，不应该在grunt构建步骤中编译较少的文件，而是仅连接，以便客户端不必加载少量文件。我觉得这是一个用户，在客户端编译时应该为其他人出现，但我找不到一个解决方案。我不关心串联是否发生在grunt-contrib-less或任何其他工具上。

Answer 1

LESS文档说：

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

请参阅：Import options和@import (inline)

您可以使用.SD关键字创建新文件，例如concatenate.less和导入.less文件。然后，如果你处理它，它将完全像连接，没有处理CSS。

<强> concatenate.less

inline

使用您以前的Grunt任务，只需将输出文件扩展名重命名为@import (inline) "file1.less" @import (inline) "file2.less" @import (inline) "file3.less"即可。测试它，应该给你你想要的。

嵌套导入

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

解决方案是grunt-includes。

使用.less和grunt-includes选项创建includeRegexp中列出的已导入LESS文件到其他文件夹的文件。
将concatenate.less个文件路径更改为该文件夹。
正常运行您的LESS编译Grunt任务。

Answer 2

如果有人正在使用gulp，

你可以在@Rene Korss sugested时创建concatenate.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";

如何使用grunt将少量文件连接（而不是编译）到一个文件中

2 个答案: