こんにちは。YOSHITAKA（@YOSHITA19704216）です。
LaravelでSassを利用していると、反映するのが遅くて、困ったので解決策を提示しておきます。
ちなみに余談ですが、、
Sassを利用して更新するのに一回で40秒以上かかる事件が起きました。
ビュー画面作るのにどれだけかかるの？？って言われて、PCの所為じゃないのか！とか怒る気持ちを抑えて解決方法を探しました。
Dockerで行う場合は以下のコマンドを入力して、操作するようにしましょう。
- WindowsでLaravelのSassを利用している人は時間短縮ができます。
Contents
LaravelのSassの利用している人向けの解決策
前提条件
そもそもWindowsで開発してる時点でどうなのか？とか、そういったお話はいらないのでスルーします。
与えられた環境で課題をこなす方を応援しています。
- 所属先がwindowsでdockerを操作しているので、macを利用の方や高性能のPCを利用されている方は効果を実感できないかもしれません。
- インストール方法については今回は割愛しています
現在の所属先では「Doker」を利用しています。もし違う方は使えないかもしれません。
準備 Laravelのコンテナに入っておく
環境構築が終わっている状態で操作をしていきます。
そのため、Dockerコンテナの環境に入っておいてください。
Windowsの場合
winpty docker-compose exec php bashmacの場合
docker-compose exec php bash※dockerに入る時は環境設定ファイルで「php」の部分が変わるので、dockerの使い方は違う記事で理解してくださいませ。
おそらくホームディレクトリが以下のように設定されていると思います。
※これは環境によって変わります。お使いの環境の設定ファイルによっては違うので、違っていても問題ありません。
var/wwwSassを使う上での知識
ここを読んでもある程度しかわからないので、理解が曖昧になっている人が多いと感じます。
以下重要な部分を抜粋しています。
Mixはwebpack上の設定レイヤーですから、
Laravelに含まれるpackage.jsonファイル上のNPMスクリプトの一つをMixの実行で起動してください。
// 全タスク実行
npm run dev
// 全タスク実行を実行し、出力を圧縮
npm run production
上記を読んで、どっちを使えば良いのか最初はわかりません。
最初に使えば良いのは、
// 全タスク実行
npm run dev
になります。
圧縮すると、整形されていない状態で出力されます。
npm run watchコマンドはターミナルで実行し続け、関連ファイル全部の変更を監視します。
webpackは変更を感知すると、アセットを自動的に再コンパイルします。
npm run watch
特定の環境のwebpackでは、ファイル変更時に更新されないことがあります。
自分のシステムでこれが起きた場合は、watch-pollコマンドを使用してください。
npm run watch-poll
ここで私はSassを反映させるコマンドの「npm run watch」を使っていたのですが、全然動作しないため、
「npm run dev」コマンドを何度も利用していたので時間がかかっていました。
本題 Sassを時間かけずに反映させる方法
これで一回ずつ行うのもありなんですが、一回通ることがわかった時点で、
次のコマンドで、増加した分だけを更新するようにしましょう。
npm run watch-poll
Windowsを使っているかたは上記のコマンドで変更したら、変更した分だけ更新されるため、時間がかからずにすみます。
まとめ
今回はLaravelでSassを利用するときの簡単な時短術についてお伝えしました。
ビュー画面を作る方はぜひ参考にしてください。
※プログラミングは習得中ですので、参考程度に記事を読んでください。
