0

M Hartl の Rails チュートリアルに従って、bootswatch テーマを追加しようとしています。

チュートリアルで定義されているboostrap-sass gemと、ネットのtwitter-bootswatch-rails gemを使用することで成功しました。

ただし、Hartl のチュートリアルでは、デフォルトのブートストラップに加えて作成するすべての CSS は、別の custom.css.scss ファイルにあります。

私のapplication.css.scssファイル（Railsのデフォルトの.cssから名前が変更されました）には含まれています

@import "bootstrap-sprockets";

// Import cerulean variables
@import "bootswatch/cerulean/variables";

// Then bootstrap itself
@import "bootstrap";

// And finally bootswatch style itself
@import "bootswatch/cerulean/bootswatch";
@import "custom";

これは機能しますが、custom.css.scss ファイルには、ブートストラップで設定された変数である $gray-light への参照があります。追加しない限り、サーバーはcssファイルの変数参照でエラーを返します

@import "boostrap-sprockets";
@import "bootstrap";

custom.css に。

ただし、最終的には、2 つの巨大な CSS ファイルが使用されるようになりました。理由はないと思います。

という考えを思いつきました

@import "custom";

custom.css.scss ファイルを application.css.scss ファイルに含めて、すべてを 1 か所にまとめ、変数が適切に機能するようにすることでした。

機能するもう 1 つの方法は、custom.css.scss の内容全体を application.css.scss にダンプすることですが、それでは個別のファイルを持つという点が無効になります。

私は何か間違ったことをしていますか？

編集: 火にさらに燃料を追加するために、custom.css から 2 行を削除し、代わりに `@import bootswatch/cerulean/variables"; を削除しました。ただし、Web サイト自体にある結果の CSS には何もありません。ファイル。

4

1 に答える 1

0

これは間違っている可能性がありますが、次のように自分の質問への回答を投稿します。

スプロケットの行//= require_selfと//= require_treeは、デフォルトでマニフェストのコメント セクション内にリストされている場合でも、実際には実行されているようです。

これにより、「必要な」各ファイルが個別にコンパイルされます。その結果、単一のapplication-FINGERPRINT.cssファイルを取得する代わりに、アプリケーション、カスタム、および static_pages を取得していました。これは「require_tree」行だと思います。

これらの行を削除すると、@import "custom"; ラインは期待どおりに機能します。ファイルはすべて 1 つのファイルに結合されapplication-FINGERPRINT.css、custom.scss.

于 2015-05-10T09:38:28.853 に答える