KoalaでSCSSコンパイル時にCSSのディレクトリを指定する方法

コンパイル時にCSSのディレクトリを指定する方法

アサル(ASAL)です!

今回は、KoalaでSASSやSCSSをコンパイルする時にデフォルトではCSSのアウトプット先のディレクトリがSCSSと同じになっているので、koala-config.jsonを使い、CSSのアウトプット先を自分の指定したディレクトリにする方法をご紹介します!

そうすることで、ファイルも分けることができ、管理しやすいですよ!

設定ファイルを作成する

まずは、Koalaを起動してディレクトリに含まれているSCSSファイルが一覧表示されるのを確認しましょう。

この時に、SCSSと同じディレクトリ内にCSSがアウトプットされています。

次に、画面の左にあるディレクトリ名を右クリックして、「プロジェクト設定」→「設定ファイルを作成」→「For Sass」を選択します。

koalaの設定ファイルを生成

選択が完了すると「koala-config.jsonをプロジェクトフォルダに作成しました。今すぐ編集しますか?」というメッセージが表示されるので、「OK」を選択して下さい。

koalaの設定ファイルを編集する

アウトプット先を設定する

ディレクトリ内にある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が生成されます。

生成されたCSSの場所

これを最初にやってしまえば、次回からはKoalaの起動と同時に、先ほど指定したアウトプット先にCSSがアウトプットされるようになります。

まとめ

今回は、KoalaでSCSSコンパイル時にCSSのディレクトリを指定する方法をご紹介しました!

僕は、いつも最初から「koala-config.json」をフォルダに入れておくことで、わざわざ設定ファイルをいちいち作らずに使っています!

アサル(ASAL)でした!

他にもこんな記事があります!