6

私が持っているもの：

Rails 3.2.2 には、次のスタイルシートがあります。

    アプリ/アセット/スタイルシート
    | |
    |-- application.css 
    |-- bootstrap_and_overrides.css.less
    | |
    |-- 注釈.css.less
    |-- maps.css.less.erb
    ` -- users.css.less.erb

最初の 2 つのものは、多かれ少なかれシステムのデフォルトです。他のものは、カスタム スタイルを定義する場所です。

したがって、application.css通常どおり、 には他のすべてのファイルが含まれます。

*= require_self
*= require_tree .

そしてbootstrap_and_overrides.css.lessもちろん、Twitter Bootstrap やその他のカスタム定義の LESS 変数も含まれています。

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
// other stuff
@brown_text: #332820;

機能しないもの:

ではannotations.css.less、 を使用したいのですが、次のようになり@brown_textます。

variable @brown_text is undefined

annotations.css.lessこれは、変数が定義される「マスター」ファイルへの参照がないためだと思います。そして、それannotations.css.lessが最初にコンパイルされたようです – 私は現在開発環境にいることに注意してください。

では、カスタムの LESS 変数を使用して、他のスタイルシート ファイルで使用できるようにするにはどうすればよいでしょうか。私の現在の「修正」は、すべてのカスタム スタイルを に移動することですがbootstrap_and_overrides.css.less.erb、これはまったくきれいに見えません。

うまくいかないもの：

Railsimportのアセット パス ヘルパーを使用しているため、LESS ファイルを単に ing することはできません。また、ERB ファイルをインポートすることもできません。これは、ステートメントがサフィックス@importを想定しているため、ファイルが見つからないためです。.less

4

2 に答える 2

8

アセット パス ヘルパーに ERB を使用する必要はありません。実際には、https ://github.com/metaskills/less-rails/#helpers で参照できる less-rails gem に組み込まれています。

アセット パイプラインを参照するために ERB を使用した場所ならどこでも、asset-path または asset-url を使用できるはずです。

これを考えると、最善の方法は次のとおりです。

  1. application.cssに変換application.css.less
  2. すべてのスプロケット ディレクティブを削除します
  3. @importディレクトリ内の個々のファイル。
  4. .erb 拡張子を持つすべてのファイルから拡張子を削除し、ERB アセット ヘルパーを Less-Rails アセット ヘルパーに変更します。
  5. annotations.css.lessインポート後に 確認してください。これが、ファイルがロードされる順序を制御できないため、bootstrap_and_overrides通常は を使用することをお勧めしない理由です。require_tree .あなたが今持っている方法では、annotations.css.less は、bootstrap_and_overrides の前、つまり使用したい変数が存在する前にロードされます。

それが役立つことを願っています!

于 2012-07-17T23:17:45.357 に答える
1

twitter-bootstrap-rails がコンパイルする方法では、他の LESS スタイルシートをオーバーライド ファイルにインポートする必要があります。したがって、追加のファイルについては、次のようになりますannotations.less。

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

//other LESS styles
@import "annotations"

詳細については、この gem が下で使用している less-rails を調べてください。

于 2012-07-17T18:59:00.203 に答える