アサル（ASAL）です！
今回は、KoalaでSASSやSCSSをコンパイルする時にデフォルトではCSSのアウトプット先のディレクトリがSCSSと同じになっているので、koala-config.jsonを使い、CSSのアウトプット先を自分の指定したディレクトリにする方法をご紹介します！
そうすることで、ファイルも分けることができ、管理しやすいですよ！
設定ファイルを作成する
まずは、Koalaを起動してディレクトリに含まれているSCSSファイルが一覧表示されるのを確認しましょう。
この時に、SCSSと同じディレクトリ内にCSSがアウトプットされています。
次に、画面の左にあるディレクトリ名を右クリックして、「プロジェクト設定」→「設定ファイルを作成」→「For Sass」を選択します。
選択が完了すると「koala-config.jsonをプロジェクトフォルダに作成しました。今すぐ編集しますか？」というメッセージが表示されるので、「OK」を選択して下さい。
アウトプット先を設定する
ディレクトリ内にあるkoala-config.jsonをファイルを開き、下記のような「mappings」を探します(多分上の方にある)。
// The mappings of source directory and output directory
"mappings": [
// {
// "src": "path/to/source",
// "dest": "path/to/output"
// }
],見つけたら、ここを下記のように編集します。
// The mappings of source directory and output directory
"mappings": [
{
"src": "./scss",
"dest": "./css"
}
],「”src”: “./scss”」のところは、コンパイル元のディレクトリが入り、「”dest”: “./css” 」のところは、アウトプット先のディレクトリを相対パスで記述します。
ちなみに、この設定だと下の画像のようにフォルダ分けしたCSSが生成されます。
これを最初にやってしまえば、次回からはKoalaの起動と同時に、先ほど指定したアウトプット先にCSSがアウトプットされるようになります。
まとめ
今回は、KoalaでSCSSコンパイル時にCSSのディレクトリを指定する方法をご紹介しました！
僕は、いつも最初から「koala-config.json」をフォルダに入れておくことで、わざわざ設定ファイルをいちいち作らずに使っています！
アサル（ASAL）でした！
