Rails アプリ用のカスタム テーマがあります。このテーマは、複雑な構造 (サブフォルダー、多数のファイル) を持つ 8 つのフォルダーで構成されています。これらのフォルダーの 1 つは、css、js、および img サブフォルダーで構成されるブートストラップです。他のいくつかのフォルダーとサブフォルダーには、css、js、および imgages も含まれています。
アセット パイプラインを使用してこれらのファイルをプリコンパイルする方法と、コードからアクセスする方法を教えてください。
1361 次
2 に答える
4
私は最近、大きな HTML5 テーマを購入し、アセット パイプラインを使用して Rails プロジェクトに組み込む作業を行いました。画像の URL に満足するために、いくつかの一括検索/置換を行う必要がありました。私が使用した全体的なアプローチは次のとおりです。
- 提供されたすべての「イメージ」ファイルとディレクトリを /vendor/assets/images の下に置きます。
- 提供されたすべてのスタイルシートを /vendor/assets/stylesheets の下に置きます
- 提供されたすべての JavaScript を /vendor/assets/javascripts の下に配置します。
上記のアプローチでは、すべての相対パスは、テーマ ベンダーが望むように維持する必要があります。たとえば、私のテーマ ベンダーはすべての画像を「img」ディレクトリの下に持っていたので、そのディレクトリを単純にコピーして、/vendor/assets/images/img/... にしました。
ここで、必要なファイルを適切に取り込むために、application.css および application.js ファイルを取得する必要があります。
- /app/assets/javascripts/application.js に require 行を追加して、テーマ ベンダーが必要としているすべての JavaScript を追加します。
- /app/assets/stylesheets/application.css に require 行を追加して、必要なすべてのスタイルシートを追加します
ここで注意が必要なのは、JavaScript とスタイルシートに他の項目が含まれているかどうかによって異なります。ファイル名を .erb に変更する (ファイル名に .erb を追加する) ことをお勧めします。これにより、asset_pathやimage_pathなどの Rails ヘルパーを使用できるようになります。
.i24_arrow-180{ background-image: url(<%= asset_path 'img/icons/packs/fugue/24x24/arrow-180.png' %>); }
または、あなたのJavaScriptで：
'<%= asset_path('js/mylibs/charts/jquery.flot.orderBars') %>':
画像パスを修正したら、新しいテーマを使用する準備ができているはずです。アセット パイプラインで動作します。
警告: テーマに関するアセット コンパイルの問題をデバッグするのに何時間も費やしましたが、その原因は画像の1 つにファイル名に括弧があり、sass コンパイラがそれを調べていたことが原因であることが判明しました!
于 2013-01-14T17:19:19.587 に答える
1
ブートストラップには、Rails ブートストラップ gem を使用することをお勧めします。残りのアセットを app/assets/{javascripts|stylesheets} ディレクトリに配置すると、マニフェストにデフォルトで require_tree 命令があるため、1 つの application.{js|css} ファイルにパックされます。
画像の場合は、app/assets/images に配置するだけで、パブリック ディレクトリにあるかのようにアクセスできます。
于 2012-12-27T16:30:49.730 に答える