9

Ruby on Rails 3.1 アセット パイプラインでLessを ( Sass /Scssと組み合わせて) 使用する最も簡単な (簡単な方法はありますか?) ものは何ですか?

bar.css.scss の場合と同じように、foo.css.less のようなファイルをロードしたい

私にはうまくいかない奇妙な解決策を見つけました（あまり試していません）： https://github.com/thisduck/ruby-less-js/issues/2

アイデアは、Twitter Bootstrap をクリーンな方法で使用することです。

4

5 に答える 5

10

Bootstrap のみを使用する場合は、Gem ファイルに「less-rails」および「less-rails-bootstrap」gem を含めることで実行できます。

次に、.css.less ファイルで @import ブートストラップを実行できます。

@import "twitter/bootstrap"

または、各構成ファイルを個別に含めることもできます (不要なものを除く)。

// Reset
@import "twitter/bootstrap/reset";

// Core variables and mixins
@import "twitter/bootstrap/variables";

@import "twitter/bootstrap/mixins";

// Grid system and page structure
@import "twitter/bootstrap/scaffolding";

// Styled patterns and elements
@import "twitter/bootstrap/type";
@import "twitter/bootstrap/forms";
@import "twitter/bootstrap/tables";
@import "twitter/bootstrap/patterns";

何らかの理由で less-rails-bootstrap gem を使用したくない場合、または含めたいブートストラップ以外の .less ファイルがある場合は、手動で .less パスを less-rails 構成に追加する必要があります。

ファイル名が .css.less で終わる場合、アセットパイプラインがそのコンパイルを処理する必要があるため (「less-rails」が含まれている限り)、この追加作業は必要ないことに注意してください。この手順は、アプリの .css.less ファイルで外部の .less ファイルを直接参照する場合にのみ必要です。

私がブートストラップに使用するセットアップは、*.less ファイルを にコピーすることvendor/assets/frameworks/twitter/bootstrapです。おそらくRuby on Railsの魔法がインポートを未処理の.lessファイルに解決し、それらをどうするかわからなかったために、ファイルを保持するvendor/assets/stylesheets/...といくつかの問題が発生しました（これは私の推測に過ぎず、完全には調べていません） ）。

プロジェクトで .less ファイルを取得したら、それらの場所を less-rails に伝える必要があります。これを行うには、次をapplication.rb.

YourApp::Application.configure do
  config.less.paths << File.join(Rails.root,'vendor','frameworks')
  # Should be set to true in production.
  config.less.compress = false
end

以下を使用して、それらを .css.less ファイルにインポートできます。

@import "twitter/bootstrap/reset"
@import "twitter/bootstrap/variables"
...
于 2011-11-30T18:04:43.450 に答える
1

このブログ投稿の人は、 Less RubyonRailsの宝石 を作成しました。

これにより、Ruby onRails3.1プロジェクトを簡単に減らすことができます。

于 2011-10-03T13:49:44.480 に答える
0

http://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/のさまざまなアプローチに関する議論を参照してください。

于 2012-02-13T12:21:38.207 に答える
-1

yourlessfile.lessファイルを に入れてpublic/stylesheetsから、ビューに含めるだけです

stylesheet_link_tag "/stylesheets/yourlessfile.less", :rel => "stylesheet/less"

ビューに less.js を含めることを忘れないでください。

于 2011-09-06T14:04:26.780 に答える