Troubleshooting

YosemiteからSierraへアップグレード後のコーディング環境整備

2017.09.25

2017.11.10

Macでコーディング

High Sierraがリリース目前のタイミングで、YosemiteからSierraにアップグレードしました!というのもiOSが11になってSafariのiCloudタブが使えなくなり、思った以上に不便だったからです!

いつの間にかメモの同期や、辞書の同期もできなくなって不便を感じながらも、CS6が使えなくなると困るのでアップグレードを見送って来ましたが、Javaを偽装できれば使えるとのことで、アップグレードへ踏み切りました!

OSリリース当初は、色々問題もあるでしょうしHighSierraは年末にでもアップグレードできればって算段です。

SassとCompassが使えない・・・・

アップグレードは程なく終わり、いよいよドキドキの制作環境の確認です。
まずはSublime Textを起動。

問題なく起動します。
続いてSublime TextのパッケージSFTPがちゃんと動作するか確認します。SFTPを使えば、ビルド>CSS更新>サーバーにアップロードが、ビルドの操作だけで可能になる優れもので、動かないとめっちゃ困ります。

というわけで、まずビルド。

「ん」

[ERROR] compass not found. Make sure it exists in your PATH.

ここから悪夢の始まりです。

システム整合性保護の影響

システム整合性保護OS X El Capitan以降で採用されているセキュリティ技術らしいのですが、どうもそれが理由で使えなくなったっぽいです。

SassもCompassも存在はしてるけどコマンドがNot foundになるので、無い扱いなのでしょうか。

ググってみると色々方法がありましたが、一番シンプルなやり方を私がはまった点を交えて紹介します。

SassとCompassの再インストール

SassとCompass、再インストールの手順です。

Xcode Command Line Toolsのインストール

Sass、CompassのインストールにはXcode Command Line Toolsが必要です。それにはまず、Xcodeをインストールします。すでにインストール済みの場合は省略可能です。

Xcodeのインストール後、Xcode Command Line Toolsのインストールを以下のコマンドでインストールします。

xcode-select --install

私がハマったのはコマンドラインツールのインストールをすっ飛ばしたからです。以前にインストール済みだと勘違いしていたのです。そうとも知らずにエラーを調べてはまた新たなエラーが出てと、不毛な時間をすごしました。

XcodeはAppStoreからインストールするだけではダメです!一度起動してインストールを完了させないとダメっぽいです。

場所を指定してインストールする

SassとCompassは場所を指定してインストールします。

Sassのインストール

sudo gem install -n /usr/local/bin sass

Compassのインストール

sudo gem install -n /usr/local/bin compass

Sass、Compasは以上です。

Sublime Textのパスを変更

SassとCompassのインストールの場所が変更になったので、Compass.sublime-buildのパスを変更します。Macintosh HD/Users/ユーザー名/Library/Application Support/Sublime Text 3 or 2/Packages/Compass/にあります。

{
 "cmd": "sh '${packages}/Compass/build.sh' '${file_path}' '${project_path:${folder}}'",
 "working_dir": "$packages/Compass",
 "selector": "source.sass, source.scss",
 "shell": "true",
 "windows":
 {
  "cmd": "build.cmd \"${file_path}\" \"${project_path:${folder}}\""
 },
 "osx":
 {
  "path": "/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:$PATH"
 }
}

最後の行を以下のように書き換えます。

{
 "cmd": "sh '${packages}/Compass/build.sh' '${file_path}' '${project_path:${folder}}'",
 "working_dir": "$packages/Compass",
 "selector": "source.sass, source.scss",
 "shell": "true",
 "windows":
 {
  "cmd": "build.cmd \"${file_path}\" \"${project_path:${folder}}\""
 },
 "osx":
 {
  "path": "/usr/local/bin:/Users/ユーザー名/.rbenv/shims:$PATH"
 }
}

これでやっとコーディングの環境が元どおり!

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する