Atomでsassファイルをwatchしてコンパイルする


準備

  • node.jsを入れる
  • ターミナルからnode-sass を入れる
    • npm -g install node-sass だと、installを繰り返してしまい、インストールが終わらない
    • 下記コマンドでインストールできました。
    • npm -g --unsafe-perm install node-sass
    • node-sass -v でバージョン確認できれば大丈夫。

Atom

  • Preference -> Install で、sass-autocompiled をインストール
  • コンパイルしたいscssファイルを開き、ctrl + shift + c で、開いたファイルを監視してくれる。

オプション

指定したフォルダにコンパイル

scssファイルの行頭に// compileCompressed: で、コンパイル先を指定する。

scss
// compileCompressed: path/to/css/hoge.css

import先のファイルもwatchする

import先のファイル行頭に//main:で、import元の親ファイルを指定する。

scss
//main:hoge.scss