50

Rails 3.1プロジェクトがあり、アセットパイプラインがうまく機能しています。問題は、Sassで画像を参照する必要があるのに、Railsが画像のURLを計算することです。（これは、Railsが画像のGitハッシュをそのファイル名に追加してバストキャッシュに追加する本番環境では特に重要です。）

たとえば、app/assets/stylesheets/todos.css.scss：

.button.checkable { background-image: url(/assets/tick.png); }

デプロイ（または実行rake assets:precompile）すると、ファイルはまたは同様のものapp/assets/images/tick.pngに移動されます。public/assets/tick-48fe85c0a.pngこれはCSSを壊します。この投稿は2つの提案をします：

  1. 画像にアセットパイプラインを使用しないでください。代わりに、画像を挿入public/images/して直接参照してください。
  2. CSSにERBを使用し、Railsに画像のURLを処理させます。

ナンバー1は確かに可能性ですが、それは私の画像でキャッシュバスティングが発生しないことを意味します。ファイルの処理にERBではなくSassを使用しているため、2番目が出ています。

4

6 に答える 6

97

以下はトリックを行う必要があります：

.button.checkable { background-image: url(image_path('tick.png')); }

Railsは実際、アセットを参照するための多数のヘルパーを提供します。

image-url('asset_name')
audio-path('asset_name')

一般に

[asset_type]-url('asset_name') #Becomes url('assets/asset_name')
[asset_type]-path('asset_name') #Becomes 'assets/asset_name'

Asset_typeは、画像、フォント、ビデオ、オーディオ、JavaScript、スタイルシートのいずれかになります。

于 2011-07-24T10:55:59.247 に答える
11

sass-rails gemは、ERB処理なしでSassから使用できるSass関数を定義します。 https://github.com/rails/sass-rails

于 2011-07-09T04:30:09.747 に答える
2

ユーザーの読み込み時間を短縮したい場合は、base64のCSSで画像を読み込むためのSteveSoudersのヒントに従うことをお勧めします。

アセット-データ-url（'パス'）

https://github.com/rails/sass-rails#asset-helpers

于 2012-11-28T23:53:38.810 に答える
1

オプション2のバリアントが機能します。あなたがこのようなものを持っているなら：

app/assets/stylesheets/pancakes_house.css.less.erb

そして、あなたはrequireそれをあなたのapplication.cssファイルに入れます。次にpancakes_house、最初にERBを通過し、その出力はLESSプロセッサを通過し、そこから出てくるものはすべてCSSに送られます。ERBをSCSS内に配置すると、少し奇妙に感じるかもしれませんが、ちょっと、それはうまくいき、あまり奇妙なことなく仕事を終わらせることができます。

したがって、ERBを介してキャッシュバスティングイメージパスを生成するために必要な方法を取得できるはずです。

これはLessファイルでのみ試しましたが.css.scss.erb、同様に機能するはずです。

余談ですが、SASSに独自の関数を追加することもできます。

このモジュールのメソッドには、SassScriptコンテキストからアクセスできます。たとえば、あなたは書くことができます 

$color = hsl(120deg, 100%, 50%)

そしてそれはを呼び出しますSass::Script::Functions#hsl。

マニュアルの少し下に独自の関数を書くためのいくつかの指示さえあります。ただし、SprocketsにSass::Script::Functionsパッチをロードさせる方法がわからないため、これを実用的なソリューションとは言えません。私よりも強いスプロケットフーを持っている人なら、このアプローチをうまく機能させることができるかもしれません。私はこれをERBifiedSCSSよりもエレガントと呼んでいます。

于 2011-06-18T05:36:34.570 に答える
1

2番は簡単に使用でき、ファイルに.erb拡張子を追加するだけです。.scss

app/assets/stylesheets/todos.css.scss.erb

メソッドを使用asset_pathして、ハッシュを使用して画像へのパスを取得します。

.button.checkable { background-image: url('<%= asset_path 'tick.png' %>'); }

このファイルはerbによって処理され、次にsassによって処理されます。

于 2011-06-21T15:14:00.030 に答える
0

アセットパイプラインを使用する場合、アセットへのパスを書き直す必要があり、sass-railsは次のアセットクラスに-urlおよび-pathヘルパー（Sassでハイフン、Rubyで下線付き）を提供します：画像、フォント、ビデオ、オーディオ、JavaScript、スタイルシート。

image-url（ "rails.png"）はurl（/assets/rails.png）を返しますimage-path（ "rails.png"）は"/assets/rails.png"を返します

より一般的な形式も使用できます。

Asset-url（ "rails.png"）はurl（/assets/rails.png）を返しますasset-path（ "rails.png"）は"/assets/rails.png"を返します

于 2016-06-25T20:55:15.237 に答える