我正在尝试为 Browserify 编写一个转换脚本，它允许我require() .less 文件。转换会将它们编译为 CSS，然后将缩小后的 CSS 包装在一个将 CSS 附加到页面的小 Javascript 函数中。

我的麻烦是 main LESS module是异步的，它似乎不能与转换脚本一起工作:

lessify/index.js(直接从 node-underscorify 建模)

var less = require('less'); 
var cleanCSS = require('clean-css'); 
var through = require('through'); 
 
module.exports = function(file) { 
    if (!/\.css|\.less/.test(file)) { 
        return through(); 
    } 
    var buffer = ""; 
 
    return through(function(chunk) { 
        return buffer += chunk.toString(); 
    }, function() { 
        compiled = buffer; 
        if (/\.less/.test(file)) { 
            compiled = less.render(compiled, function(e, r) { return r; }); 
        } 
        // rv comments 
        compiled = compiled.replace(/\/\*.*?\*\//g, ""); 
 
        // minify. TO DO: Get less.js to do this for us 
        var compiled = cleanCSS.process(buffer); 
 
        compiled = "(function($) { $('head').append('<style type=\"text/css\">" + compiled.replace(/'/g, "\\'") + "</style>');}(window.jQuery));"; 
        this.queue(compiled); 
        return this.queue(null); 
    }); 
}; 

这适用于 .css 文件，但由于 compiled 未定义，因此在 .less 文件上会中断。

有几个completed pull requests在与此相关的 less.js 源代码中，但似乎没有一个对我有用。

我不是很熟悉 through 库，所以也许它的行为可以很容易地调整为异步函数？我意识到 less.render() 默认异步处理 @import 是有意义的，并且不介意放弃导入以便能够直接 require() 在我的页面上更少。

请您参考如下方法:

如果稍微修改一下，这实际上是有效的。我在 buffer 上运行 cleanCSS 是愚蠢的，而不是 compiled

var less = require('less'); 
var cleanCSS = require('clean-css'); 
var through = require('through'); 
 
var parser = new(less.Parser)({ 
    processImports: false 
}); 
 
module.exports = function(file) { 
    if (!/\.css|\.less/.test(file)) { 
        return through(); 
    } 
    var buffer = ""; 
 
    return through(function(chunk) { 
        return buffer += chunk.toString(); 
    }, function() { 
        var compiled; 
        // CSS is LESS so no need to check extension 
        parser.parse(buffer, function(e, r) {  
            compiled = r.toCSS(); 
        }); 
 
        // rv comments 
        compiled = compiled.replace(/\/\*.*?\*\//g, ""); 
 
        var compiled = cleanCSS.process(compiled); 
 
        compiled = "(function($) { $('head').append('<style type=\"text/css\">" + compiled.replace(/'/g, "\\'") + "</style>');}(window.jQuery));"; 
        this.queue(compiled); 
        return this.queue(null); 
    }); 
};