
LaravelのアプリケーションでSassを利用する方法をまとめました。SassとはCSSを拡張したメタ言語です。変数や関数などを使うことでCSSをより効率的に書くことができます。
しかしSassのままではスタイルを変更することができません。SassをCSSにコンパイルしなければいけません。
LaravelのアプリケーションでSassを使う場合は、SassをCSSにコンパイルしたり、ファイルをまとめてくれる Laravel Mix
というツールを使います。
Laravel Mixのインストール準備
まずは node.js
と npm
がインストールされているかを確認しましょう。ターミナルで以下のコマンドを実行してください。
$ node -v
v 10.15.1
のようにバージョンが表示されればOKです 👍(バージョンは各環境によって違います)
$ npm -v
6.4.1
のようにバージョンが表示されればOKです 👍(バージョンは各環境によって違います)
もしバージョンが表示されない場合は node.js
と npm
をインストールしてください。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.js
をpublic/js
ディレクトリにコンパイルするresources/sass/app.scss
をpublic/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を書いてコンパイルすることを忘れないでください