Question

我有这个结构

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

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

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

我有一个编译成main.css的文件较少现在我也有admin.less我想编译成admin.css 但我只能在less2css设置中指定一个输入和输出：

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

我该怎么做？
或者有更好的编译器编译@ save for Sublime Text吗？

Answer 1

我建议你研究一下外部构建系统，比如gulp，而不是在Sublime Text内部进行编译。 Gulp可以监视您的文件以进行更改，然后根据该文件执行操作。如果你有node和npm setup，请运行这些命令来设置gulp和gulp的插件。

（注意：它根本不必是一个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 编译你的一次， gulp watch 立即开始观看，并且普通 gulp 编译所有内容然后开始观看

正如你所看到的，gulp是非常强大的。你可以做一些事情，比如缩小JavaScript，编译CoffeeScript，LiveReload你的浏览器等等。

（我为我的iPad上的任何错误道歉。）

编辑：iPad格式化错误。

在Sublime Text中将两个单独的CSS文件与Less2css组合在一起

1 个答案: