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