もくじ
はじめに
CSSが書けるなら、SCSSを導入して損はありません！
便利らしいということは知っていたけど手を出さずにいた私ですが、ちょっと調べてみるとやっぱり便利でかつコードも楽そうなので導入することにしました。
laravelでの導入は少し手順があるので記録しておきます。
1.準備
まず、Node.jpとNPMがインストールされているか確認します。
$ node -v $ npm -v
インストールがまだであれば、過去記事の「npm」の項目をご覧ください。
次にLaravel Mixをインストールします。これはpackage.jsonにある依存パッケージなので、以下コマンドで完了します。
$ npm install
これでがインストールできます。
2.Mixの変更
ファイルのビルド先を指定
プロジェクトディレクトリ直下にあるwebpack.mix.jsを開き、最後の行を任意に変更します。
（略）
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
まず.sass関数が何を意味しているかというと第一引数でSCSSファイルの指定、第二引数に出力先を指定しています。
.sass('resources/sass/app.scss', 'public/css')
このapp.scssに変更を加えて保存すると、即時にCSSに変換されたファイルが第二引数のディレクトリに保存されます。
ファイル名は同じものになります。
もともとstyle.cssというファイル名でCSSを作成しリンクを繋げていた場合、以下のように書き換えることでそのままHTMLは変更しなくてよくなります。（その場合、もともとあったstyle.cssは必ずバックアップしておいてください）
.sass('resources/sass/style.scss', 'public/css')
ビルドがエラー時のみの通知
このままだと、ビルドするたびに「Build Successful」というデスクトップ通知がきます。正直こまめに保存していると毎回出てきて煩わしいのでエラー時のみに変更しました。
同様にwebpack.mix.jsを開き以下を追記します。
mix.disableSuccessNotifications();
前項で保存先を変更したメソッドと同様なので並列させることができます。
全体像は↓こちら。セミコロンは最後のみなので注意しましょう。
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.disableSuccessNotifications();
3.Gitの管理
自動生成されるファイルはGit管理下から外す必要があります。
そのため、.gitignoreに追記しましょう。
public/css public/js public/mix-manifest.json
次項の$ npm run devで自動生成されるファイル陣なので初めはないかもしれません。
ディレクトリではなくファイル単位で個別指定も可能です。
public/css
↓
public/css/sytle.css
pullするとエラーになったら
.gitignoreに追記し忘れたままプルリク、マージしたりプルなどした場合、エラーが出ます。（私が陥ったエラーでした）
$ git pull origin master
（略）
error: The following untracked working tree files would be overwritten by merge:
public/js/app.js
public/mix-manifest.json
Please move or remove them before you merge.
Aborting
これが出た場合、追跡すべきではないファイルを追跡してしまっていることが原因です。前述したように自動生成されるファイルはGit管理下から外す必要があります。
まずエラーの出ているファイルをGit管理下から外しましょう。
$ git rm public/js/app.js $ git rm public/mix-manifest.json
次に下記を.gitignoreに追記して今後も追跡しないようにします。
public/js public/mix-manifest.json
最後にプッシュして完了です。（作業中のファイルがあればstashしておきます）
$ git add . $ git commit -m "ignore" $ git push origin master
これでエラーが解決できました！
4.Mixの実行
laravelのプロジェクト直下で以下を実行します。
$ npm run dev // 開発用にビルド $ npm run production // 常時ビルド $ npm run watch // ファイル保存のたびにビルド実行
これらはwebpack.mix.jsに変更を加えた際にも実行します。
これにより、resources/sass/style.scssを変更し保存するだけでCSSファイルが自動で生成され保存されます。
