これまでスタイルシートはcssファイルに書くという昔ながらのやり方をしてきましたが、いい加減飽きてきたのでより効率的に記述できるというSassに手を出してみることにしました。
そこで、Laravel5.5でSassを利用する際の手順を調べましたのでメモします。
前提としてファイルは次の場所に置きます。
・scssを記述するファイル：resources/assets/sass/site.scss
・cssを書き出すファイル：public/css/site.css
手順1. laravel-mixのインストール
scssファイルのコンパイルにはlaravel-mixというNode.jsのパッケージが必要になります。
Laravel5.5のpackage.jsonにはすでにlaravel-mixの記述がされていますので、プロジェクトルートで下記のコマンドを実行するだけでインストールされます。
npm install
手順2. webpack.mix.jsの設定
webpack.mix.jsはlaravel-mixが読み込む設定ファイルです。
ここに記載されている情報をもとにscssをcssに変換します。
下記のように記述します。
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/site.scss', 'public/css');
これで、resources/assets/sass/site.scss はコンパイルされると、 public/css/site.cssに出力されるということになります。
手順3. scssファイルの監視
scssファイルが更新されたら自動的にコンパイルされるように、プロジェクトルートで下記のコマンドを実行します。
npm run watch
もし自分の環境ではうまく動作しない場合は、次のものも試してみてください。
npm run watch-poll
ただ、このままではログアウトすると監視が止まってしまいますので、次のようにnohupを組み合わせてみました。
nohup npm run watch > /dev/null &
常時起動はこれでいいのかちょっと分からないのですが、もし他に常套手段がありましたら、ご教授いただけるとありがたいです。
これでresources/assets/sass/site.scss を書き換えれば、public/css/site.cssも変更されるようになりました。
それではsassの勉強を進めたいと思います。
