, , ,

[Susy2] Sass + Compass + Susy2 watch & compile error with grunt

公開日: 2014/07/22
更新日: 2018/11/14

バージョンの組合せによってエラーが出るよう。
いろいろありました。

ruby のバーションは 2.1.1 です。

% rbenv version
2.1.1 (set by /Users/****/.rbenv/version)

Contents

症状1: compass watch でエラー

それぞれ下記のバージョンを利用。
compass install susy で susy の設定を追加して、grunt でコンパイルして利用できていました。

% compass -v
Compass 1.0.0.alpha.21
% sass -v
Sass 3.3.10 (Maptastic Maple)
% gem install susy
Fetching: susy-2.1.2.gem (100%)
Successfully installed susy-2.1.2
Parsing documentation for susy-2.1.2
Installing ri documentation for susy-2.1.2
Done installing documentation for susy after 0 seconds
1 gem installed

別のプロジェクトを始めようと compass create --using susy <project name> で作成。
compass watch するとエラーが表示されました。

% compass watch sample_susy2
>>> Compass is watching for changes. Press Ctrl-C to Stop.
E, [2014-07-21T23:42:15.511810 #24804] ERROR -- : Actor crashed!
Errno::ENOENT: No such file or directory - sysctl
        /Users/****/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/celluloid-0.16.0.pre2/lib/celluloid/cpu_counter.rb:28:in ``'
    :

症状2: susy を見失う

compass watch が動かせるようインストールし直してみます。

% gem install sass
Successfully installed sass-3.3.10
Parsing documentation for sass-3.3.10
Done installing documentation for sass after 7 seconds
1 gem installed
% gem install compass
Fetching: sass-3.2.19.gem (100%)
Successfully installed sass-3.2.19
Fetching: compass-0.12.7.gem (100%)
Successfully installed compass-0.12.7
Parsing documentation for sass-3.2.19
Installing ri documentation for sass-3.2.19
Parsing documentation for compass-0.12.7
Installing ri documentation for compass-0.12.7
Done installing documentation for sass, compass after 13 seconds
2 gems installed

なぜか違うバージョンがインストールされました。

% compass -v
Compass 0.12.7 (Alnilam)
% sass -v
Sass 3.3.10 (Maptastic Maple)
% gem install susy
Successfully installed susy-2.1.3
Parsing documentation for susy-2.1.3
Done installing documentation for susy after 0 seconds
1 gem installed

compass watch とコンパイルができることは確認。

% compass w
>>> Change detected at 12:39:53 to: screen.scss
overwrite stylesheets/screen.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.

しかし、今度は susy を見失う。
susy を使ってプロジェクトを始めようとすると下記のエラー。

% compass create --using suzy sample_susy2
No such framework: "susy"

grunt でコンパイルすると下記のエラー。

Running "compass:dev" (compass) task
Gem::ConflictError on line ["2099"] of /Users/****/.rbenv/versions/2.1.1/lib/ruby/site
_ruby/2.1.0/rubygems/specification.rb: Unable to activate susy-2.1.3, because sass-3.2.19
conflicts with sass (< 3.5, >= 3.3.0)
Run with --trace to see the full backtrace
Warning: ↑

調査

stackoverflow で調べてみると、似たようなエラーの報告が多発しています。
バージョンの組合せに問題があるのかも？

最新バージョンにそろえてみる

gem cleanup でバージョンの古い gem を削除してみる。

% gem cleanup
Cleaning up installed gems...
    :
Attempting to uninstall susy-2.1.2
Successfully uninstalled susy-2.1.2
    :
Attempting to uninstall compass-0.12.7
Successfully uninstalled compass-0.12.7
Attempting to uninstall compass-1.0.0.alpha.20
Successfully uninstalled compass-1.0.0.alpha.20
Attempting to uninstall compass-core-1.0.0.alpha.20
Successfully uninstalled compass-core-1.0.0.alpha.20
Attempting to uninstall sass-3.3.9
Successfully uninstalled sass-3.3.9
    :
Attempting to uninstall sass-3.2.19
Successfully uninstalled sass-3.2.19
Clean Up Complete

関連する gem のバージョンは下記となった。

% gem list
*** LOCAL GEMS ***
    :
compass (1.0.0.alpha.21)
compass-core (1.0.0.alpha.21)
compass-import-once (1.0.4)
    :
sass (3.3.10)
    :
susy (2.1.3)
    :
  • compass watch でエラー。
  • grunt で compass と susy の利用を確認。

インストールし直してみる

アンインストールしてから、インストールし直してどんなバージョンが入るのか確認してみます。

% gem uninstall susy
Successfully uninstalled susy-2.1.3
% gem uninstall compass
You have requested to uninstall the gem:
  compass-1.0.0.alpha.21
middleman-3.3.3 depends on compass (>= 0.12.4)
sprockets-sass-1.2.0 depends on compass (~> 1.0.0.alpha.19, development)
sprockets-sass-1.1.0 depends on compass (~> 1.0.0.alpha.19, development)
If you remove this gem, these dependencies will not be met.
Continue with Uninstall? [yN]  y
Remove executables:
  compass
in addition to the gem? [Yn]  y
Removing compass
Successfully uninstalled compass-1.0.0.alpha.21
% gem uninstall sass
You have requested to uninstall the gem:
  sass-3.3.10
compass-core-1.0.0.alpha.21 depends on sass (< 3.5, >= 3.3.0)
compass-import-once-1.0.4 depends on sass (< 3.5, >= 3.2)
middleman-3.3.3 depends on sass (< 4.0, >= 3.2.17)
sprockets-2.12.1 depends on sass (~> 3.1, development)
sprockets-sass-1.2.0 depends on sass (~> 3.3, development)
sprockets-sass-1.1.0 depends on sass (~> 3.3, development)
tilt-1.4.1 depends on sass (>= 0, development)
If you remove this gem, these dependencies will not be met.
Continue with Uninstall? [yN]  y
Remove executables:
  sass, sass-convert, scss
in addition to the gem? [Yn]  y
Removing sass
Removing sass-convert
Removing scss
Successfully uninstalled sass-3.3.10

% gem dependency susy
No gems found matching susy (>= 0)
% gem dependency sass
No gems found matching sass (>= 0)
% gem dependency compass
Gem compass-core-1.0.0.alpha.21
  bundler (>= 0, development)
  multi_json (~> 1.0)
  rake (>= 0, development)
  sass (< 3.5, >= 3.3.0)
Gem compass-import-once-1.0.4
  bundler (~> 1.3, development)
  diff-lcs (>= 0, development)
  rake (>= 0, development)
  sass (< 3.5, >= 3.2)
  sass-globbing (>= 0, development)
% gem uninstall compass-core-1.0.0.alpha.21
% gem uninstall compass-import-once-1.0.4
% gem uninstall compass-import-once
You have requested to uninstall the gem:
  compass-import-once-1.0.4
middleman-3.3.3 depends on compass-import-once (= 1.0.4)
If you remove this gem, these dependencies will not be met.
Continue with Uninstall? [yN]  y
Successfully uninstalled compass-import-once-1.0.4
% gem uninstall compass-core
Successfully uninstalled compass-core-1.0.0.alpha.21

インストールします。

  • compass 0.12.7 は sass 3.2.19 を要求。
  • susy 2.1.3 は sass 3.3.10 を要求。
% gem install compass susy
Fetching: sass-3.2.19.gem (100%)
Successfully installed sass-3.2.19
Fetching: compass-0.12.7.gem (100%)
Successfully installed compass-0.12.7
Parsing documentation for sass-3.2.19
Installing ri documentation for sass-3.2.19
Parsing documentation for compass-0.12.7
Installing ri documentation for compass-0.12.7
Done installing documentation for sass, compass after 10 seconds
Fetching: sass-3.3.10.gem (100%)
Successfully installed sass-3.3.10
Fetching: susy-2.1.3.gem (100%)
Successfully installed susy-2.1.3
Parsing documentation for sass-3.3.10
Installing ri documentation for sass-3.3.10
Parsing documentation for susy-2.1.3
Installing ri documentation for susy-2.1.3
Done installing documentation for sass, susy after 8 seconds
4 gems installed

この状態では下記となります。

  • compass watch で利用を確認。
  • grunt で compass と susy を利用するとエラー。

対応

やはりそれぞれの gem の組合せでエラーが発生するよう。
Bundler を利用してバージョンをコントロールします。

% bundle init

Gemfile を編集します。

Gemfile
gem "compass", "~> 1.0.0.alpha.21"
gem "susy", "~>2.1.0"
gem "sass", "~>3.3.0"

インストールします。

% bundle
Fetching gem metadata from https://rubygems.org/...........
Fetching additional metadata from https://rubygems.org/..
Using chunky_png 1.3.1
Using multi_json 1.10.1
Installing sass 3.3.10
Using compass-core 1.0.0.alpha.21
Using compass-import-once 1.0.4
Using rb-fsevent 0.9.4
Using ffi 1.9.3
Using rb-inotify 0.9.5
Installing compass 1.0.0.alpha.21
Installing susy 2.1.3
Using bundler 1.6.4
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.
Post-install message from compass:
    Compass is charityware. If you love it, please donate on our behalf at http://umdf.org/compass Thanks!

結論としては以下となります。

  • Sass + Compass + susy2 を使うためには、Compass 1.0.0 を使わねばならない。
  • （現状）バージョン管理が必要なため、Bundler を利用する。
  • （現状）compass watch は使えないため、grunt で監視する必要がある。

今後のバージョンアップで解決されると思いますがメモ。

補遺

インストールや grunt の設定などに関しては、下記で補足します。