sublimetext2 - 在 Sublime Text 中使用 Less Css 合并两个单独的 CSS 文件

Question

我有这个结构

includes/
    less/
        main.less
    css/
        main.css

它工作正常，但我现在需要这个:

includes/
    less/
        main.less
        admin.less
    css/
        main.css
        admin.css

我有一个 less 文件被编译到 main.css 中。
现在我还有 admin.less，我想将其编译成 admin.css。
但我只能在 less2css 设置中指定一个输入和输出:

"less2css":
{
    "autoCompile": true,
    "minify": true,
    "main_file": "/includes/less/core.less",
    "outputFile": "/includes/css/main.css"
}

我该怎么做？
或者有没有更好的编译器，可以为 Sublime Text 编译 @ save ？

Answer 1

我建议您不要在 Sublime Text 内部进行编译，而是查看外部构建系统，例如 gulp 。 Gulp 可以监视文件的更改，然后据此执行操作。如果您安装了 Node 和 npm，请运行这些命令来设置 gulp 和 gulp 的 less 插件。

(注意:它甚至根本不必是一个 Nodejs 项目。另外，我建议制作一个 package.json 并将 node_modules 添加到您的 gitignore，但这现在无关紧要。)

npm install -g gulp
npm install --save-dev gulp
npm install --save-dev gulp-less

然后，在项目的根目录下创建一个名为 gulpfile.js 的文件，并输入以下文本:

var gulp = require("gulp");
var less = require("gulp-less");

// Task to compile all less files in the project
gulp.task("less", function() {
    gulp.src("includes/less/*.less")
        .pipe(less())
        .on("error", console.error.bind(console))
        .pipe(gulp.dest("includes/css"));
});

// Task to watch less files for changes
gulp.task("watch", function() {
    gulp.watch("includes/less/*.less", ["less"]);
});

// Compile everything once and then watch for changes.
gulp.task("default", ["less", "watch"]);

运行gulp less来编译一次less，gulp watch立即开始观看，运行普通gulp来编译所有内容一次然后开始观看.

正如你所见，gulp 非常强大。您可以执行诸如缩小 JavaScript、编译 CoffeeScript、LiveReload 浏览器等操作。

(对于任何错误，我深表歉意，我使用的是 iPad。)

编辑:iPad 格式错误。