web-dev-qa-db-ja.com

Rails 3.1？

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番が出ています。

ruby-on-railscssruby-on-rails-3sasssprockets
49
James A. Rosen

以下はトリックを実行する必要があります。

.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、スタイルシートのいずれかです。

96
Topo

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

11
Kliment Mamykin

ユーザーの読み込み時間を短縮したい場合は、base64のCSSに画像を読み込むためのSteve Soudersのヒントを参考にしてください。

asset-data-url（ 'path'）

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

2
Alex Grande

オプション2のバリアントが機能します。このようなものがある場合：

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

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

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

Lessファイルでこれを試しましたが、.css.scss.erbでも動作するはずです。

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

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

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

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

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

1
mu is too short

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

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

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

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

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

1
Lev Lukomsky

アセットパイプラインを使用する場合、アセットへのパスを書き換える必要があり、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"を返します

0
oroyo segun