Compass

WindowsだとCompassのCSSスプライト画像ができない…!?の解決法

こんにちわ!
Sass+Compassを導入してから、すっかりSASSってばっかりいるWebヤンキーのAスケです!

前置きなんていらないよって方はこちらをクリック!


最近、周りでもブームが起こっているようで


とか


だったり


とか大盛り上がりです。


一度この便利さを味わったら、脱することはできない夢のようなツール… しかし導入当初、Windows環境下だとCSSスプライト画像が生成されず、困り果てたことがありました。

それを解決すべく作業手順を解説します。
なお、Sass+compassの導入は済んでいることを前提に進めさせていただきますので、これから導入ですという方は以下の記事がとても参考になると思います。

コーダー必見、SCSS・Compassで開発効率アップ|Sublime Text 2でコンパイル編

いざCSSスプライト画像を書き出そうとするとエラー

Compass::SpriteException on line [“84″] of C: No files were found in the load path matching “sprite/*.png”. Your current load paths are: X:\Users\XXX\XXX/img
こんなエラーが出て、CSSスプライトが書き出されません。
原因は、Windowsのファイルルートのようです。

これを解決するには、gemを使ってインストールしたcompassのパッケージを修正する必要があります。
compassのパッケージの場所は、コマンドプロンプトで
gem which compass
といれれば出てくるでしょう。
私の場合は
C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/lib/compass.rb
と出ました。そして、このディレクトリにあるsprite_importer.rbを開きます。なにがあっても困るので、バックアップは取っておきましょう!

修正箇所は以下の通りです。

上記を、下のように書き換え。

続いて

上記を、下のように。

で保存して、SublimeText2も再起動しましょう。
これでめでたく、CSSスプライト画像が生成されるはずです!

それでもできませんよ、という方は導入手順を見直してください。
特に、SublimeText2のProjectファイルが保存されているかBuild System が Compass になっているか辺りを見直すと、解決するかもしれません。

これで念願のCSSスプライト自動生成です!
ガリガリとWebデザインしていきましょう!

参照元:removed Dir[] for glob fallign back to Sass::Utils for glob support clos… · 58babac · chriseppstein/compass · GitHub

3 thoughts on “WindowsだとCompassのCSSスプライト画像ができない…!?の解決法

    1. ponさん

      お役に立てたようで良かったです!こちらこそ、コメントありがとうございます♪