Mac で sass-autocompile を使う方法

まずはnode.jsをインストールしましょう。

https://nodejs.org/ja/

上記ページの「推奨版」をダウンロード＆インストールしてください。

ここまでは全く問題なくできると思うんですが、多くの方が次のステップである node-sass のインストールができず苦労されているようで、私もその一人でした。

Macで node-sass をインストールする方法を様々な記事で見ましたが、 ターミナル（例の黒い画面） で訳の分からないコードを入力してはエラーが出て心が折れそうでした。。。

それでも、やっとこさ良い方法が見つかりました！！！

node-sassがインストールできずに心が折れそうになっているMacユーザーを救うべく、この記事を書きましたので是非最後までご覧ください！！

では、いきましょう！！

お好みの場所にお好みのフォルダを作る

例）

/Users/（ユーザーネーム）/Desktop/work/tool/node-sass

↑私はこんな感じで「node-sass」というフォルダを作りました。

node-sass をインストールする場所を変更する

ターミナルを起動して下記のコマンドを実行してください。

npm config set prefix '（上記で作成したフォルダのパス）'

例）

npm config set prefix '/Users/（ユーザーネーム）/Desktop/work/tool/node-sass'

上記手順の場所変更がちゃんとできているか確認

ターミナルで下記のコマンドを実行してみてください。

npm config get prefix

これで先ほど作成したフォルダのパスが表示されれば問題ありません。

いよいよ node-sass をインストールする

ターミナルで下記コマンドを実行すると node-sass のインストールが始まります。

npm install -g node-sass

パスワードを聞かれるので、Mac を起動した時やロックを解除する時のパスワードを入力して Enter を押しましょう。

パスワードの入力中は何文字入力したかわからない表示のされ方をしていますが気にせず入力して Enter してください。

エラーが出まくった時の対処法

node-sass のインストールをすると

npm ERR! ○○○○○〜〜〜〜〜〜〜○○○○○

といったエラーが大量に出てくる場合があります。

そんな事態に遭遇した場合は下記の手順を試してみてください。

アクセス権限の変更

下記コマンドを実行してください。

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

意味はわかりませんが、アクセス権限を変更するとかしないとかしてるらしいです。

再度 node-sass のインストール

上記のコマンドを実行後、下記のコマンドで再度 node-sass をインストールしてみてください。

npm install -g node-sass

これでもインストールできなかった場合は、私のMacの環境でインストールされた node-sass のダウンロードリンクを貼り付けておきますのでよろしければダウンロードしてご活用ください。m(_ _)m

↑何これww すごい怪しいボタンになってしまってますがウイルスとかは入っていませんのでご安心ください(T▽T)

ちゃんとインストールされているか確認

はじめにお好みの名前で作成したフォルダを開いてみましょう。

• bin
• lib

という2つのフォルダが確認できればOKです。

Atom の Sass Autocompile の設定を変更

Atom を起動して

設定画面 > パッケージ > sass-autocompile

を開いてください。

下の方にスクロールしてしばらく進むと「Path to ‘node-sass’ command」という入力欄が現れます。

その入力欄に先ほどインストールした node-sass の本体までのパスを入力します。

例）

/Users/（ユーザーネーム）/Desktop/work/tool/node-sass/bin

↑ node-sass のファイルが bin の中に入っていますが、この入力欄には最後の「node-sass」は入力しません。

あくまで node-sass 本体『までの』パスを入力してください。

以上です。

早速、scssファイルを開いて ⌘ + s で保存してみましょう。

画面下でくるくる回っているローディングマークが出て、緑色のメッセージが出れば成功です！