1

私は、RequireJS用のGuy Bedfords lessプラグインを取得して、いくつかの一般的なファイルを後続のすべてのlessファイルにプルしようとしています。目標は、モジュール固有の少ないファイルを個別に保持することですが、変数やミックスインなどのいくつかの一般的なアセットをそれぞれに取り込むことです。

ただし、これまでのところ、プラグインはそれぞれの少ないファイルを独自に解析しているようです。

たとえば、私が単に言う場合:

// variables.less

@red: #ff0000;


// styles.less

body {
    background-color:@red;
}


// main.js

define(['less!variables', 'less!styles'], function() {
    ...
});

variables.lessとstyles.lessはどちらも解析されますが、styles.lessはvariables.lessに@redが表示されず、styles.lessが解析に失敗したというjavascriptエラーが発生します。

gitの例を見ると、依存関係を分離する(最初にロードするように強制する)ように見えました。

// common.js

define(['less!variables'], function() {
    return {}; 
});


// main.js

define(['common', 'less!styles'], function() {
    ...
});

しかし、これは私に同じ結果をもたらします。styles.lessが正しく解析されなかったというエラーが少なくなりました。

styles.lessで@importを使用してvariables.lessをプルするなど、いくつかの「ハック」を試しましたが、require-lessはほとんどのURLを正規化するが、@ importsは正規化しないようです。したがって、variables.lessになります。絶対に参照する必要がありますが、これは私が望んでいることではありません。

私がここで間違っていることを誰かが知っていますか?

目標は、r.jsとうまく統合されたものを使用して、開発中のRequireJSを介してより少ないファイルをロードおよび解析し、展開のためにすべてのファイルをcssにプリコンパイルすることです。require-lessプラグインは見栄えがしますが、変数やミックスインを使用できないことはかなり重大なバグです。これを行うための他のオプションはありますか?

ありがとう。

4

1 に答える 1

0

一般的な少ないアセットをロードする方法は、@importを使用することのようです。これは、URLの正規化を機能させるための非常に迅速な修正になりました(https://github.com/guybedford/require-css/pull/26)。

于 2013-01-31T21:21:02.200 に答える