Laravel Mixの仕組みをわかりやすく解説:CSSをSASS/SCSSで記述する方法

はじめに

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を記述できるようにしましょう。

関連記事

開発環境(ローカルストレージ)と本番環境(Amazon S3)にトリミング+リサイズした画像を保存する方法
# はじめに 以前、以下の記事を書きました。 - [開発環境と本番環境で画像のアップロード先を分岐する方法 \- AUTOVICE](https://www.autovice.jp/articles/68) - [ローカルやAmazon [...]
2020年3月7日 11:56
【Laravel 6.x】Laravelプロジェクトの名称を変更する方法
# はじめに あまりないケースではありますが、一度作成したLaravelプロジェクトの名称を変更する方法を解説します。ここで言うLaravelプロジェクトの名称とは、以下のコマンドの`Sample`のことを指します。 ```terminal [...]
2020年3月4日 16:24
【Laravel】ローカルディスクやAmazon S3にアップロードした画像をビューで表示する方法
# はじめに 本記事では、ローカルディスクやAmazon S3にアップロードした画像をビューで表示する方法について説明しています。 なお、本記事では画像のアップロードする方法については説明していません。本記事は既に実装済みの画像アップロード [...]
2020年3月4日 15:44
【Laravel】Amazon S3へのアップロードが「403 Access Denied」で失敗する原因と対処方法
# はじめに LaravelでAmazon S3へ画像アップロードする処理を実装し、いざアップロードしようとしたところ、以下のエラーが出て失敗しました。 ``` Error executing "PutObject" on "https: [...]
2020年3月4日 13:33
開発環境と本番環境で画像のアップロード先を分岐する方法
# はじめに この記事では、以下の方針で画像のアップロード先を分岐する方法について解説しています。 - 開発環境:ローカル(storage/app/public/) - 本番環境:Amazon S3 # 事前準備 AWSに未登録の [...]
2020年3月4日 12:52
独自ポリシーの導入手順と注意点(ハマリポイント)を解説
# はじめに ユーザーと記事を関連付けておいて、編集や削除は記事の作成者のみ許可したいときにはポリシーを作成します。今回はポリシーの導入手順と注意点(ハマリポイント)を解説します。 # 導入手順 ## ポリシー作成 ターミナルで以下 [...]
2020年3月1日 10:32
ユーザー認証機能の導入手順と生成されたフォームを日本語化する方法を解説
# はじめに Laravelではユーザー認証機能の導入が簡単にできてしまいます。この記事ではLaravelプロジェクトにユーザー認証機能を追加する手順と、生成されたフォーム(デフォルトでは英語)を日本語化する方法を解説します。 # 前提 [...]
2020年2月29日 13:54
【Laravel 6.x】ネスト構造になっているRESTfulルーティングの定義方法
# はじめに RESTfulルーティングを定義するときは`Route::resource`を使いますが、ネスト構造になっているRESTfulルーティングの定義方法を調べたので記事にします。 # 前提 おそらく、Laravel 6.xのみ対 [...]
2020年2月28日 20:06