LaravelでSassを利用する

LaravelのアプリケーションでSassを利用する方法をまとめました。SassとはCSSを拡張したメタ言語です。変数や関数などを使うことでCSSをより効率的に書くことができます。

https://sass-lang.com/

しかしSassのままではスタイルを変更することができません。SassをCSSにコンパイルしなければいけません。

LaravelのアプリケーションでSassを使う場合は、SassをCSSにコンパイルしたり、ファイルをまとめてくれる Laravel Mix というツールを使います。

Laravel Mixのインストール準備

まずは node.jsnpm がインストールされているかを確認しましょう。ターミナルで以下のコマンドを実行してください。

$ node -v

v 10.15.1 のようにバージョンが表示されればOKです 👍(バージョンは各環境によって違います)

$ npm -v

6.4.1 のようにバージョンが表示されればOKです 👍(バージョンは各環境によって違います)

もしバージョンが表示されない場合は node.jsnpm をインストールしてください。Node.jsをインストールすると同時にnpmもインストールされます。

https://nodejs.org/en/download/

Laravel Mixのインストール

Laravelのアプリケーションのroot ディレクトリに package.json が存在することを確認してください。package.json にはLaravel Mixを利用するための情報、nodeの依存関係が記述されています。

以下のコマンドを実行してLaravel Mixをインストールしてください。

$ npm install

package-lock.json というファイルが作成できていればOKです 👍

コンパイル先を確認する

Laravelのアプリケーションのroot ディレクトリに webpack.mix.js があることを確認してください。

webpack.mix.js を開いてみると以下のような実装が書いてあると思います。

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

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

これは「どのファイルをどのディレクトリにコンパイルするか?」が書かれています。上記の例では以下のようになります。

  • resources/js/app.jspublic/js ディレクトリにコンパイルする
  • resources/sass/app.scsspublic/css ディレクトリにコンパイルする

Sassを書いてみる

例として使うために resources/views ディレクトリの直下に sass.blade.php を作成してください。

そして sass.blade.php , routes/web.php , resources/sass/app.scss を以下のように変更してください。

<?php

Route::get('/sass', function () {
    return view('sass');
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sass</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <h1 class="text">Sassの勉強です</h1>
</body>
</html>
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

.text {
    width: 100vw;
    height: 100vh;
    line-height: 100vh;
    text-align: center;
    color: red;
}

「Sassの勉強です」という文字が中央で赤色になるように書きました。ターミナルで以下のコマンドを入力して http://127.0.0.1:8000/sass にアクセスしてみてください。

$ php artisan serve

左上に黒色の」文字が表示されていると思います。

前述しましたが、Sassに書いただけではスタイルが反映されないのでCSSにコンパイルする必要があります。

Laravel Mixを使ってコンパイルする

ターミナルでLaravel Mixを実行する以下のコマンドを入力してください。

$ npm run dev

以下のような実行結果になればOKです 👍

 DONE  Compiled successfully in 7101ms                                                      22:58:15

       Asset      Size   Chunks             Chunk Names
/css/app.css   196 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.39 MiB  /js/app  [emitted]  /js/app

webpack.mix.js にSassのコンパイル先はどこと書いてあったでしょうか。 public/css ディレクトリですね。

public/css ディレクトリの中に app.css が追加されていることを確認し、ファイルの一番下に app.scss に追加したスタイルが反映されていることを確認してください。

....
....
....

.text {
  width: 100vw;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
  color: red;
}

これでSassをCSSにコンパイルすることが成功です 👍

再度http://127.0.0.1:8000/sass にアクセスしてみてください。文字が赤色になっていれば成功です👍

もう一度Sassを変更した場合

Sassを変更するたびにCSSにコンパイルする必要があります。そのため毎回 npm run dev コマンドを実行する必要があります。

しかし、それは面倒くさいのでSassファイルが変更、保存されたことを監視するコマンドがあります。

$ npm run watch

これでSassファイルを変更、保存すると自動的にCSSにコンパイルしてくれます。

BladeファイルでCSSを読み込む方法

sass.blade.php のCSS読み込みで以下のように書いていたことに気がつきましたでしょうか?

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Laravelのアプリケーションでは基本的にJavascriptやCSS、画像ファイルなどのアセットと呼ばれるものたちは public ディレクトリに保存されています。

asset() という関数は public ディレクトリに保存されているアセットのURLを作成するものです。

この asset() を使うことによってbladeファイルで適切にCSSを読み込むことができます。

まとめ

LaravelのアプリケーションでSassを利用するためにLaravel Mixを使ったコンパイルの方法を書きました。

今後スタイルを適用したい場合はSassを書いてコンパイルすることを忘れないでください