1

私の現在のプロジェクトでは、icnludes のインデックスに次の構造があります。

...

<link rel="stylesheet/less" type="text/css" href="css/master.less" media="screen" />

<!--module source CSS-->
<link rel="stylesheet/less" type="text/css" type="text/css" href="module/A/css/A.less" media="screen" />
<link rel="stylesheet/less" type="text/css" href="module/B/css/B.less" media="screen" />

...

私のmaster.lessには、mixin.lessのような他の少ないファイルが含まれています。このファイルには、正常に動作する多くの宣言があります-テスト済みです。

しかし、モジュール B.less で .gradient のようないくつかのミックスインを使用しようとすると、次のようなエラーになります: .gradient is undefined

mixin.less に配置されたグラデーション mixin は完全に問題ありません。

.gradient (@startColor: white, @endColor: #eee) {
    background-color: @startColor;
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background: -webkit-linear-gradient(top, @startColor, @endColor);
    background: -moz-linear-gradient(top, @startColor, @endColor);
    background: -ms-linear-gradient(top, @startColor, @endColor);
    background: -o-linear-gradient(top, @startColor, @endColor);
}

この mixin を B.less で直接使用すると、機能します。だから私は混乱しています。私はless.jsでクライアント側の部分を使用しており、http://lesscss.org/のfknマニュアルを読んでいますが、何が悪いのかわかりません。

ファイルが正しくロードされているなど、何が問題なのですか?

4

1 に答える 1

5

HTML ドキュメント内の各 LESS ファイルは個別にコンパイルされるため、master.less で作成しているミックスインはこのファイルのコンテキスト内にのみ存在し、他の .less ファイルには表示されません。

これを行うことをお勧めします：

  1. すべてのミックスインを含むファイル mixins.less を作成します。
  2. master.less で、最初にその mixins.less ファイルをインポートしてから、追加のモジュールレス ファイルをインポートします。
  3. HTML ドキュメントでは、master.less のみを参照してください。

あなたが経験している状況がドキュメントで明確に定義されていないことに同意しますが、less.js を使用して LESS を操作したいほとんどの人は、1 つのファイルから始めると想定しています。

お役に立てれば。

于 2013-04-25T12:23:46.307 に答える