.less ファイルを作成できる Browserify 用の変換スクリプトを作成しようとしていrequire()
ます。変換はそれらを CSS にコンパイルし、その縮小された CSS をページに追加する小さな Javascript 関数にラップします。
私の問題は、メインの LESS モジュールが非同期であり、変換スクリプトと一緒に動作しないように見えることです。
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 ファイルでは問題なく機能しますが、未定義であるため .less ファイルでは機能しませんcompiled
。
これに関連する less.js ソースには完了した プル リクエストがいくつかありますが、どれもうまくいかないようです。
私はthrough
ライブラリにあまり詳しくないので、おそらくその動作は非同期関数に簡単に調整できますか? less.render()
デフォルトで を処理するために非同期にするのが理にかなっていることを認識しており、自分のページで@import
直接 LESS を実行できるようにするために、インポートを控えることを気にしません。require()