4

ドットレスを使用して次の構造を達成しようとしています:

styles/variables.less - 以下のようなすべての変数が含まれています

@color:green;



styles/component1.less - variables.less をインポートするランダムなコンポーネント固有のスタイル

@import "variables";

body {
   background:@color;
}



styles/component2.less - グローバル variables.less ファイルもインポートするいくつかのスタイル

@import "variables";

a {
    color:@color;
}



BundleConfig.cs - 以下のようにバンドルを宣言します。このバンドル追加を使用しています: https://gist.github.com/benfoster/3924025

bundles.Add(new Bundle("~/styles/css", new LessTransform()).Include("~/styles/component1.less", "~/styles/component2.less"));



Debugがtrueに設定されている 場合、すべて正常に動作します

デバッグが true に設定されている場合に機能します

ただし、デバッグがfalseに設定されている場合

bundle の Include メソッドで渡された最初のファイルのみが @import "変数" を解決します。残りは失敗するだけです。

以下は、最初に「~/styles/component1.less」を宣言した場合の出力です。 

bundles.Add(new Bundle("~/styles/css", new LessTransform()).Include("~/styles/component1.less", "~/styles/component2.less"));


component1.less が最初に宣言されている場合

「~/styles/component2.less」を最初に宣言した場合の出力

bundles.Add(new Bundle("~/styles/css", new LessTransform()).Include("~/styles/component2.less", "~/styles/component1.less"));

componentnet2.less が最初に宣言されている場合

奇妙なことに、コンポーネント1とコンポーネント2に異なるファイルをインポートすると機能します

たとえば、どちらかのファイルで「varibales」の名前を「variables.less」に変更すると、これらのインポートの外観が少し異なります。できます。以下のように

スタイル/コンポーネント1.less

@import "variables.less"; // added extension here

body {
   background:@color;
}

作品

何かご意見は？私は何日もこれをいじっています..

編集

この構造を使用する理由:

  • デバッグが容易になるため、デバッグモードで個別の少ないファイルを送信します。行番号のコメントはあまり役に立ちません

  • 本番環境で提供されるときに、すべての少ないファイルを連結して縮小する。

すべてのファイルの上に @import 「変数」を追加するのは見苦しいです。

だから、ここで言及されているいくつかのスコープの問題のために明らかに動作しません. MVC バンドルを使用して別のファイルで少ない変数を参照する

そのための修正があり、すべてのlessファイルの内容を連結し、代わりにLessを使用して連結されたファイルを解析します。例はこちらhttps://groups.google.com/forum/?fromgroups#!topic/dotless/j-8OP1dNjUY

しかし、その場合、解析されたファイルの縮小版を取得できないようです。

4

3 に答える 3

5

ドコスによると：

v1.3.0 から v1.3.3 では、@import はファイルを複数回インポートし、@import-once でこの動作をオーバーライドできます。

v1.4.0 では @import-once が削除され、@import はデフォルトで一度だけインポートされます。これは、次のことを意味します

変数の 2 回目のインポートは無視され、変数@color:green;は最初のコンポーネントのスコープでのみ定義されます。2番目のコンポーネントのスコープで定義されていないため、おそらくルールが適用されるか、ファイル全体が無視されることになります（私はデフォルトの動作に精通していません。追加のプロパティとルールを追加して、何が起こるかを確認することができます）。これは、プリプロセッサのログを調べるか、コンソールでエラーを追跡できるようにすることで確認できます。

@Hansが提案した（+1）のように、「より高い」レベルの変数を共有スコープにインポートすると、これが修正されるはずです。暫定的な代替手段は、プリプロセッサを v1.3.0-v1.3.3 にダウングレードして、@import複数回起動することです。CSS プリプロセッサを扱うときの私の好みは、変数と mixin 機能のみに依存しているため、私自身はこれを許容できるオプションと見なすことができました。

于 2014-01-06T23:17:44.487 に答える