atomでsass-autocompileを使用する方法

Sassを使用していますが、Atomでコンパイルできるように「sass-autocompile」というパッケージを導入しました。
私自身が行なった導入手順と使い方について、備忘的に記載します。（使用しているOSは、macosです）

導入手順

1. Homebrewのインストール
2. nodebrew、Node.jsのインストール
3. node-sassのインストール
4. sass-autocompileの設定変更

1. Homebrewのインストール

まず、Homebrewがインストールされているか確認します。

$ brew -v
Homebrew 2.0.2
Homebrew/homebrew-core (git revision 623c4; last commit 2019-02-27)

Homebrewのversionが表示されれば、すでにインストールされています。

https://qiita.com/balius_1064/items/ac7dff5ef10eaf69996f
を参考にさせてもらい、インストールしました。

2. nodebrew、Node.jsのインストール

こちらもまず、すでにNode.jsがインストールされているか確認します。

$ node -v
v10.15.1

こちらも上記のようにversionが表示されていれば、すでにインストールされています。

https://qiita.com/limonene/items/a10c2755dd2784357c43
を参考にさせてもらい、nodebrew、Node.jsをインストールしました。

3. npm-scriptsでの設定変更

npm-scriptsで、node-sassをインストールします。

$ npm install -g node-sass

正しくインストールされているか確認します。

$ node-sass -v
node-sass   4.11.0  (Wrapper)   [JavaScript]
libsass     3.5.4   (Sass Compiler) [C/C++]

こちらも上記のようにversionが表示されていれば、すでにインストールされています。

4. sass-autocompileの設定変更

Atomを開きます。

1. 環境設定＞インストールより、「sass-autocompile」をインストールします。
2. 環境設定＞パッケージより、「sass-autocompile」の設定を開きます。

3. 基本defaultのままで良いと思いますが、私の場合、scssディレクトリとcssディレクトリを分けて、同じ階層に配置しているので、以下項目を変更しました。

   • Filename pattern for 'compressed' compiled files
     • ../css/$1.min.css
   • Filename pattern for 'compact' compiled files
     • ../css/$1.compact.css
   • Filename pattern for 'nested' compiled files
     • ../css/$1.nested.css
   • Filename pattern for 'expanded' compiled files
     • ../css/$1.css

4. 「Include paths」に、scssディレクトリまでの絶対パスを設定します。
   例： /Users/hogehoge/vmbox/workspace/app/assets/scss

5. 「Path to 'node-sass' command」に、インストールしたnode-sassが格納されているディレクトリまでの絶対パスを設定します。
   例：　/Users/hogehoge/.nodebrew/current/bin

使い方

sass-autocompileの設定にある、KeybindingsがEnableであることを確認します。
コンパイルしたいscssファイルを開いた上で、ctrl-shift-Cでコンパイルが実行されます。
成功すると、画面下部に、
「SASS-AutoCompile: Successfully compiled」のようなメッセージが出てきます。

最後に

以上私が行なった設定でした。もっと便利な方法があったり、誤りや不足している点がありましたら、やさしくコメントいただければ幸いです。