はじめに

Laravel Mixの仕組みをわかりやすく解説します。Laravel Mixを使ってアセットコンパイルを行うことで、SASS/SCSSでCSSを記述できるようになります。

Laravel Mixの仕組み

まずはじめに、LaravelのCSSがどういう風にアセットコンパイルされるのかを説明します。

CSSファイル

HTMLから参照されるCSSファイルはpublic/css/app.cssです。作成したばかりのLaravelプロジェクトにはありませんが、手動で作る必要はありません。後述のアセットコンパイルを実行すれば自動的に作られます。

SASS/SCSSファイル

アセットコンパイル前のSASS/SCSSファイルはresources/sass/app.scssにあります。作成したばかりのLaravelプロジェクトでは何も書かれていません。このファイルにSASS/SCSSで記述し、後述のアセットコンパイルを実行することで、public/css/app.cssが作られます。

Laravel Mix

Laravel Mixとは、アセットパイプライン（アセットコンパイルの設定）を記述する設定ファイルであり、実行するAPIのことです。

プロジェクト直下にあるwebpack.mix.jsというファイルがLaravel Mixの設定ファイルです。このファイルにアセットコンパイルを行いたいファイルと出力先を記述します。

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Laravelプロジェクト作成直後のwebpack.mix.jsです。下2行でアセットコンパイル対象のファイルと出力先を記述しています。このように。複数のファイルを記述するときはメソッドチェーンで繋いでいきます。

アセットコンパイル

ファイル構成がわかったところで、アセットコンパイルを実行していきます。

準備

アセットコンパイルを行うには、Node.jsとNPMが必要になるのでインストールします。

$ node -v
$ npm -v

続いて、LaravelプロジェクトにLaravel Mixをインストールします。

$ npm install

package.jsonに記述された依存パッケージがインストールされます。

手動実行

アセットコンパイルを行う前に、resources/sass/app.scssを以下のように設定します。なんでもいいので、SCSSでCSSを記述します。

.content {
    .odd {
        background-color: #fff;
    }
    .even {
        background-color: #efefef;
    }
}

アセットコンパイルを実行します。初回は時間がかかります。

$ npm run dev

実行が完了すると、public/css/app.cssが作成されます。

.content .odd {
  background-color: #fff;
}

.content .even {
  background-color: #efefef;
}

SCSSで記述した内容がCSSに変換されました。

CSSの圧縮を行うこともできます。

$ npm run production

以下のようなpublic/css/app.cssが作成されます。

.content .odd{background-color:#fff}.content .even{background-color:#efefef}

無駄な改行や空白が削除されています。

例のような短いCSSなら圧縮をする意味はあまりありませんが、SASS/SCSSでBootstrapをインポートなどしていると、生成されるCSSが長大なものになってしまいます。CSSが長大だとそれだけページの読み込みに時間がかかってしまうので、CSSの圧縮はなるべく行ったほうがいいと思います。

変更の監視

SASS/SCSSを変更するたびに手動でアセットコンパイルを行うのは非情に面倒です。

Laravel Mixではアセットコンパイル対象のファイルを監視し、変更が発生したときに自動でアセットコンパイルを行う機能があります。

$ npm run watch

resources/sass/app.scssを変更して保存してみてください。Laravel Mixが変更を検知し自動でアセットコンパイルが行われます。Macであれば、アセットコンパイルが完了したら右上に以下のような通知が表示されます。

まとめ

LaravelのアセットコンパイルであるLaravel Mixについて解説しました。

CSSを記述するときにSASS/SCSSはなくてはならないものです。Laravel Mixを使ってLaravelでSASS/SCSSを記述できるようにしましょう。