[Sass/SCSS Compass] Mac でSassがインストールできない時の最終確認と解決方法

Sass/SCSS

CSS の作業効率が10倍アップするSass/SCSS(以降Sass)Sassを使うためにはPC自体に Ruby をインストールする必要があります。そして、Mac の場合Rubyが最初からインストールしているのでSassをそのままインストールできると思ってしまいますが、それが落とし穴でした。以下に問題と解決方法を残します。

問題

私の場合、MacターミナルからRubyがインストールされている事を確認($ ruby -v)してから Sass インストール($ gem install sass)を試みましたが、エラーが発生してSassをインストールする事ができませんでした。

エラー内容

$ sudo gem install sass
Password:
Building native extensions. This could take a while…

ERROR: Error installing sass: ERROR: Failed to build gem native extension.

current directory: /Library/Ruby/Gems/2.3.0/gems/ffi-1.11.3/ext/ffi_c /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby -r ./siteconf20191203-34826-f6hyod.rb extconf.rb mkmf.rb can’t find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/include/ruby.h

extconf failed, exit code 1

Gem files will remain installed in /Library/Ruby/Gems/2.3.0/gems/ffi-1.11.3 for inspection. Results logged to /Library/Ruby/Gems/2.3.0/extensions/universal-darwin-18/2.3.0/ffi-1.11.3/gem_make.out

解決方法の前に確認

Ruby のバージョン管理がされている確認します。バージョン管理は「rbenv」を用いて行います。下記のコマンドを実行してみましょう。

$ rbenv versions

バージョン管理がされている場合は「* system ・・・」に続いて使っているRubyのバージョン番号が表示されます。バージョン番号が表示されない場合Sassがインストールできない問題はバージョン管理できていないからです。

表示例:
system (set by /Users/admin/.rbenv/version)
 2.5.0 ← バージョン管理ができていないとこの番号が表示されない。

状況の確認ができたら解決方法を試す

バージョン番号が表示されない場合は以下の方法を試しましょう。
rbenv でバージョン管理を行います。下記のコマンドをターミナルに打ち込んでください。

 $ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
 特に結果は返ってきませんそのまま下記も打ち込みます。
 $ source ~/.bash_profile
こちらも特に結果は返ってきません。

次にRubyをバージョン指定してインストールします

 $ rbenv install 2.5.0

今回は 2.5.0 にしましたが、好みのバージョンをインストールしてください。
このコマンドを実行すると完了までにかなりの時間がかかりますので気長にお待ち下さい。

インストールが完了したら下記のコマンドを実行

 $ rbenv global 2.5.0

それでは改めてSassがインストールできるか試してみましょう。

$ sudo gem install sass
タイトルとURLをコピーしました