Atom Editorでsass-autocompileのコンパイル先を変更する方法

Atom Editorでsass-autocompileのコンパイル先を変更する方法

こんにちは、コーディングをするときはテキストエディターのAtomさんにお世話になっているゆうやです!

cssを書く際、最近はもっぱらstylusを使っているんですが、先日取り組んだ案件でsassを使用する機会があり、sassファイルをコンパイルするために「sass-autocompile」というパッケージを使用しました。

↓↓sass-autocompileパッケージ

Atom sass-autocompile

このパッケージ、デフォルト設定だとコンパイル先がsassファイルと同じディレクトリーに出力されてしまいます。

しかし、sassファイルとコンパイルされたファイルを同じフォルダーに置くフォルダ構造をしているプロジェクトはかなり少ないです。

↓↓ 以下のようにsassファイルはsassフォルダ内に、コンパイルしたcssファイルはcssフォルダ内におさめるのが一般的かなと。

Atom sass-autocompile

一般的なフォルダ構成の例

そこで本記事ではAtomでsass-autocompileを使うのが初めてな人でも簡単にコンパイル先を変更 or 指定できる方法をお伝えします!

45秒もあればできるのでぜひぜひ!

sass-autocompileのコンパイル先を変更する方法

方法は2つありますのでお好きな方を試してみてくださいな。

パッケージのSettingsを変更する

■STEP1

↓↓「Atom→Preferences…」をクリック!

Atom sass-autocompile設定

もしくは、「command + ,」!

■STEP2

↓↓「Packages→sass-autocompile」をクリック!

Atom sass-autocompile設定2

■STEP3

↓↓デフォルトの「$1.min.css」から「../css/$1.min.css」に変更する!

Atom sass-autocompile設定3

めっちゃ簡単!!

sassファイルに直接指定する

こちらも至って簡単です。

↓↓sassファイルの1行目に「compileNested: ../css/$1.css」を追加しましょう〜

Atom sass-autocompile設定4

おしまい!!

まとめ

いかがでしたでしょうか。

sassをAtomエディターで使用する機会があったら今回紹介したコンパイル先を変更する方法をやってみてくださいね!

最後までご高覧いただきありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です