QA@IT

外部ライブラリの CSS 内の url を Asset Pipeline に対応させるには?

1859 PV

前提

Rails 4.0.2 を利用しています。

jQuery UI の Datepicker を使おうと以下のようにしました。

app/assets/stylesheets/application.css

/*
 *= require jquery-ui/themes/base/jquery.ui.core
 *= require jquery-ui/themes/base/jquery.ui.datepicker
 *= require jquery-ui/themes/smoothness/jquery.ui.theme
 */

app/assets/javascripts/application.js

//= require jquery/jquery
//= require jquery-ui/ui/jquery.ui.core
//= require jquery-ui/ui/jquery.ui.datepicker

$ tree vendor/assets/components (無関係なファイルは省略しています)

vendor/assets/components
|-- jquery
|   `-- jquery.js
`-- jquery-ui
    |-- themes
    |   |-- base
    |   |   |-- jquery.ui.core.css
    |   |   `-- jquery.ui.datepicker.css
    |   `-- smoothness
    |       |-- images
    |       |   |-- ui-bg_flat_0_aaaaaa_40x100.png
    |       |   |-- ui-bg_glass_95_fef1ec_1x400.png
    |       |   |-- ui-bg_gloss-wave_16_121212_500x100.png
    |       |   |-- ui-bg_highlight-hard_15_888888_1x100.png
    |       |   |-- ui-bg_highlight-hard_55_555555_1x100.png
    |       |   |-- ui-bg_highlight-soft_35_adadad_1x100.png
    |       |   |-- ui-bg_highlight-soft_60_dddddd_1x100.png
    |       |   |-- ui-bg_inset-soft_15_121212_1x100.png
    |       |   |-- ui-icons_666666_256x240.png
    |       |   |-- ui-icons_aaaaaa_256x240.png
    |       |   |-- ui-icons_bbbbbb_256x240.png
    |       |   |-- ui-icons_c98000_256x240.png
    |       |   |-- ui-icons_cccccc_256x240.png
    |       |   |-- ui-icons_cd0a0a_256x240.png
    |       |   `-- ui-icons_f29a00_256x240.png
    |       `-- jquery.ui.theme.css
    `-- ui
        |-- jquery.ui.core.js
        `-- jquery.ui.datepicker.js

jQuery UI のインストールには bower を利用しており、以下のようにしています。

.bowerrc

{ "directory": "vendor/assets/components" }

bower.json

{
  "dependencies": {
    "jquery":    "1.8.3",
    "jquery-ui": "1.9.2"
  }
}

問題

このとき vendor/assets/components/jquery-ui/themes/smoothness/jquery.ui.theme.css 内には

background-image: url(images/ui-icons_222222_256x240.png);

のような記述があります。

このため、development 環境では問題なく画像ファイルにアクセスできるのですが、production 環境では

  1. CSS のパスが /assets/jquery-ui/themes/smoothness/jquery.ui.theme.css から /assets/application.css に変わるため、画像ファイルへの相対パスがずれる
  2. 画像ファイル名に hash が付加される

という理由によりうまく行きません。

jQuery UI に限らず、CSS と画像がある外部ライブラリを利用する場合、同じ問題にぶつかると思うのですが、皆さんどのように解決しているのか教えてください。

思いついた解決方法

以下は、思いついた/試してみたけどうまく行かなかった方法です。

A. jquery.ui.theme.css を sass にして url()image-url() にする

外部ライブラリを書き換えること、バージョン管理下に置くことはできれば避けたいです。bower を使っている利点もなくなってしまいます。

B. ln -s ../components/jquery-ui/themes/smoothness/images vendor/assets/jquery-ui/images

(1) の相対パスがずれる問題は解決出来ましたが、(2) の hash の問題は解決できませんでした。

C. jquery-ui-rails を利用する

テーマが入っていませんでした。また以下も気になります。

  • jQuery UI 1.9.2 を利用するには、古いバージョンである jquery-ui-rails 3.0.1 を利用する必要がある
  • jquery-ui-rails 3.0.1 は jquery-rails に依存している
  • jQuery 1.8.3 を利用するには、古いバージョンである jquery-rails 2.2.0 を利用する必要がある

もともと Rails のバージョンによって JavaScript ライブラリのバージョンが決められるのが嫌で jquery-rails は使わず bower を使っていたので、同じような問題が起きそうであまり気が進みません。
(今は問題なくても、例えば Rails 5 で jquery-rails 2.2.0 は使えないため jQuery 1.8.3 は使えないということが起こります)

D. rails-assets.org を利用する

  • [◯] css が scss に変換されており image-url() も使われている
  • [△] CSS が分割されておらず Datepicker だけの利用でもすべての CSS を読み込む必要あり
  • [×] なぜかテーマが dark-hive に固定されている

(今回は jQuery UI 以外試していませんが、jQuery UI でなければこれが一般的な解決策になるのでしょうか?)

ウォッチ

この質問への回答やコメントをメールでお知らせします。