PhpStormでSCSS(SASS)ファイルをCompassでコンパイルする方法とMacの場合の注意点

MacでPhpStormを使っていて、CompassでSCSSファイルをコンパイルしようとしたらエラーが起きたので、その回避策の次いで使い方も一緒に書いておくことにしました。(WebStormも同様です)

以下の2つが既に行われていること前提で話を進めます。

  • SASS/Compassがインストールされている
  • SCSS(SASS)ファイルが入っているプロジェクトフォルダをPhpStormで開いている

PhpStormでCompassを動かす

まず、プロジェクトフォルダにconfig.rb(Compass用の設定ファイル)を配置します。そして、config.rbを編集して作業パスを設定します。

例えばプロジェクトが以下のファイル構成だった場合。

ディレクトリの構造図

このディレクトリ構造ならconfig.rbのパス設定はこうなります。

 

config.rbを設置したら、「File > Settings…」(Macなら「PhpStorm > Preferences…」)で設定ウインドウを開きます。

左メニューから「Compass Support」を選択し、「Enable Compass support」にチェックを入れます。config.rbが設置されていればチェックを入れると下の2つの項目に自動的にパスが入力されます。

パス指定が入力されたことを確認し、右下の「Apply」を押して適用します。(先にApplyで適用しないと、後に設定するFile Watchersの項目が自動的に設定されません)

phpstorm-compass-mac02

 

次に、左メニューの下に見える「File Watchers」をクリックして、右側に表示される「+」ボタンを押します。

phpstorm-compass-mac03

 

SCSSファイルなら「compass scss」、SASSファイルなら「compass sass」をクリックします。

phpstorm-compass-mac04

 

上記説明の手順で設定をしていれば、File Watcherは自動的に設定されています。「Show console:」の項目を「Always」にするとエラーが出なくてもコンソール(コンパイルログ)が表示されるようになります。(ちゃんとコンパイルされたか確認したい場合はAlwaysがオススメです)

  • 「Arguments:」
  • 「Working directory:」
  • 「Output paths to refresh:」

の項目がそれぞれ入力されていることを確認し、右下のOKボタンを押してウインドウを閉じます。

phpstorm-compass-mac05

 

最後に、File WatchersをApplyで適用し、OKボタンで設定ウインドウを閉じます。

これでCompassでコンパイルする環境は整いました。SCSS(SASS)ファイルを編集すると、config.rbで指定したCSSフォルダにCSSファイルが吐出されます。

またファイルを編集した時に「File watcher ‘SCSS’ is available for this file. Description: ‘Compiles .scss files into .css files’」とアラートが出ると思いますが、Compassでコンパイルするように設定したので「Dismiss」をクリックして無視します。(これは「SASSのコンパイル機能を使うかい?」というアラートですね)

phpstorm-compass-mac06

Macでコンパイルする場合の注意点

Mac(OSX)でコンパイルをした時に「You must compile individual stylesheets from the project directory.」というエラーが出た場合。

これはプロジェクトのディレクトリ名に日本語を使っている、もしくは(Windowsでもそうですが)config.rbのパス指定が間違っている可能性があるので確認してみて下さい。

最終更新日:2014年9月28日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/phpstorm-compass-mac/trackback/