Pages

2018年6月11日月曜日

CakePHP3 + PhpStorm + Compass の設定

最新の CakePHP3 では

 composer install

すると

 src/Sass
 config.rb

が作成される様子なので、このに準ずる事とする。

無ければ以下で作成する

composer.json があるプロジェクトディレクトリ内に移動して初期設定のコマンドを実行。

$ compass create --sass-dir "src/Sass" --css-dir "webroot/css" --javascripts-dir "webroot/js" --images-dir "webroot/img"

src/Sass/screen.scss
 src/Sass/print.scss
 src/Sass/ie.scss
 webroot/css/ie.css
 webroot/css/print.css
 webroot/css/screen.css

が作成されるのが嫌って人は --bare オプションを追加して。

$ compass create --bare --sass-dir "src/Sass" --css-dir "webroot/css" --javascripts-dir "webroot/js" --images-dir "webroot/img"

 src/Sass
 config.rb

が作成されるはず。(他は元からあるはず。)

config.rb の中身はテキストなので確認する。

後でやっぱり

 src/Sass/screen.scss
 src/Sass/print.scss
 src/Sass/ie.scss
 webroot/css/ie.css
 webroot/css/print.css
 webroot/css/screen.css

を作成したいって人は。

$ compass init

を実行すればOK。

--bare の場合はまだ作成されないけど、コンパイルが実行されると

.sass-cache

が作成されるはずなのでこれは .gitignore に追加してバージョン管理されないように。


ここかまでが無ければの人の下ごしらえ。
で、ここから phpstorm の設定方法。

1.phpstorm の設定ウィンドウを開く

 File > Settings (Ctrl + Alt + s)


2.Compass の設定画面に移動する。

 Languages & Frameworks > Sytlesheets > Compass

 この設定はコンパイルの自動化だけなら必要無し。
 恐らく何か便利機能のため。
 1つしかできないので管理用画面と会員用画面みたいな複数で config.rb を分けたい時は多分どうしようもない。。


3.Enable Compass support にチェックを入れる。

自動的に Compass executable file: と Config Path: は設定されるはず。

 Compass executable file: compass コマンドのパス
 Config Path: config.rb のパス


4.File Watchers の設定画面に移動する。

 Tools > File Watchers


5.設定を追加する。

 右に緑の十字アイコンの Add(追加)ボタン をクリックして Compass SCSS を選択。


6.以下の内容を設定

デフォルトである程度適切に設定されてるはずだが、 Arguments: だけ変更。

 File type: SCSS Style Sheet
 Scope: Project Files
 Program: compass or compass.bat のパス
 更新 Arguments: compile
 Output paths to refresh: 空
 Working directory: config.rb を置いているディレクトリパス

※ 動作確認したい場合は Show console: Always に変更して確認でもOK。


以上!

Followers