web-dev-qa-db-ja.com

@importまたはマニフェストファイルを使用する必要がありますか？

Rails 3.1では、マニフェストファイルの導入により、JSとCSSの両方を整理する新しい方法が導入されています。たとえば、application.jsは次のようになります。

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .

これにより、Jqueryのさまざまなビット、すべての独自のJSが取得され、それらが連結されて、単一のファイルとしてクライアントに提供されます。十分に単純です。

残念ながら、SASSを使用した場合、状況はそれほど明確ではありません。 SASSには、すでに@importを使用して連結が組み込まれています。

すべてのパーシャルを完全なSASSファイルに変更し、マニフェストファイルを使用してそれらを連結するか、@ importを引き続き使用する必要がありますか？どうして？

ruby-on-rails-3sassassets
37
Rupert Madden-Abbott

SprocketsはすべてのインポートをCSSに変換してから連結するため、ファイル間でミックスインや変数を共有するために使用することはできません。 SASS、LESS、CSSファイルをその方法でインポートできるからといって、これはそのままであると思います。

だからここに私がそれをする方法があります：

  • 含めるERBがある場合（主にasset_path()呼び出し用）、それらをメインファイルapplication.css.scss.erbに入れます
  • 含めたいCSSをベンダーしている場合は、Sprocketsを介してそれを要求します。 //=require jquerymobile
  • 同じファイルで、SASS @importコマンドを使用してすべてのファイルを明示的にロードします。ただし、@ importされたファイルはいずれも.erbではない可能性があります。
    1. 基本的なもの（リセットなど）を読み込み、ミックスインでインポートする
    2. 変数を宣言する
    3. 特定のスタイルをインポートする

これが私のapp.cssの現在の様子です。 「;」を忘れないでくださいそして引用：

// Using SASS import is required for variables and mixins to carry over between files.
@import "reset.css.scss";
@import "mixins.css.scss";

$color_base: #9b2d31;
$color_background: #c64e21;

// Using asset_path is important for browsers to use versioned url for the asset.
// This lets us do aggressive caching.
$logo-url: url(<%= asset_path("logo.png") %>);

@import "application/layout.css.scss";
@import "application/sidebar.css.scss";
@import "application/videos.css.scss";
@import "application/pages.css.scss";
...

Rails 3.1アセットパイプラインをまだ調査しているため、マイレージが異なる場合があることに注意してください。他に興味深いものがあれば、戻ってきて更新します。

30
webmat

これを解決する最良の方法は、ネイティブ@importディレクティブは、ここで説明します： https://github.com/Rails/sass-Rails#important-note

この質問はすでにここで回答されています： sassでスプロケットインポートを使用する方法

お役に立てれば！ :)

2
user2263402

sass-Railsgem explicitly states SASSファイルでrequire構文を使用しない-SASSを使用- @import ステートメントの代わりに。

1
Yarin