css - Rails 3 での LESS 変数のインポート

Question

多くのサイト全体の変数を定義したアセット フォルダーに global.less ファイルがあります。

これらの変数を他の少ないファイルで使用するために、現在、これを各ファイルの先頭に配置しています。

@import 'global';

これにより、すべてが正常にロードされますが、グローバルのコピーがすべてのファイルにロードされます。プロジェクトに一度だけインポートを書き込み、他の少ないファイルがそれにアクセスできるようにする方法があるかどうか疑問に思っていますか?

Answer 1

これを実現するために必要な小さなことは 2 つだけです。

1. またはに名前を変更して、 .lessapplication.cssファイルを作成します。application.lessapplication.css.less

2. sprocket ディレクティブを削除するrequire_tree .と、stylesheets ディレクトリ内のファイルが単独でインポートされ、順序を定義できなくなります。

これらのことが完了すると、期待どおりに動作するはずです。

// in global.less
@foo: #FFFFFF;

// in foo.less
.foo {
  background-color: @foo;
}

// and finally in application.less
@import 'global';
@import 'foo';