Laravel Mixというツールを使うとSassをCSSにコンパイルすることができる。
出力先のディレクトリ設定も超簡単。
目次
- Laravel Mixの機能
- Node.jsとnpmのインストール
- Laravel Mixのインストール
- コンパイル先の指定
- ファイルの作成
- コンパイルの実行
- ブラウザに表示
- 変更反映の自動化
- 本番用のコンパイル
- URLの自動変換機能（オフにする方法も）
- 複数ファイルをワイルドカードで指定する
Laravel Mixの機能
SassをCSSにコンパイルするだけでなく、Less, Stylus, PostCSSにも対応している。複数のcssファイルを１つのcssファイルに統合することもできる。
また、CSS以外にもJSの圧縮、.vue（ビューJS）、.jsx（リアクトJS）などのコンパイルにも対応している。
今回は、Sass -> CSS機能のみにフォーカス。
コンパイル手順
1. Node.jsとnpmのインストール
node -v
#v12.18.3
npm -v
#6.14.8
バージョンが表示されればインストール済み。
ない場合は、node.js公式ページからダウンロード。
2. Laravel Mixのインストール
Laravelのプロジェクトを作成した時点でルートディレクトリ直下にpackage.jsonが存在する。
ここにはnodeの依存パッケージが記述されており、以下コマンドで記載のパッケージをインストールする。
$npm install
package-lock.jsonが作成されたらインストール完了。このファイルはインストール済みのnpmパッケージが記載されている。（自動生成されるファイルなので編集しない！）
laravel mixもインストールされている。
$npm install [パッケージ名]で指定したパッケージをインストールする。
パッケージ名を指定しない場合は、package.jsonに従ってインストールを行う。
3. コンパイル先の指定
デフォルトでルートディレクトリにwebpack.mix.jsがある。この中にコンパイルする形式や出力先の情報を記述する。
・mix.メソッド名('コンパイルするファイルパス', '出力先');
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
↓ 以下に変更
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
resources > sass の app.scssファイルをコンパイルして、public > css 配下に出力する。
▼（補足）別の指定方法
メソッドチェーンでつなげず、別々に記述しても機能する。
mix.js('resources/js/app.js', 'public/js');
mix.sass('resources/sass/app.scss', 'public/css');
4. ファイルの作成
実際にコンパイルするファイルを作成する。
app.scssファイルの作成
resources > sass > app.scss
h1 {
color: skyblue;
}
テストなのでシンプルに、、
ビュー
resorces > views > for-scss.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div>
<h1>SCSSのテスト</h1>
</div>
</body>
</html>
▼cssファイルの読み込み
コンパイルされたcssファイルを読み込む記述を記載する。
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
URLの呼び出しはassetヘルパー関数を使用。
（参考）assetヘルパー関数とは？
ルーティング
routes > web.php
Route::get('scss', function () {
return view('for-scss');
});
5. コンパイルの実行
以下コマンドでコンパイルが開始する。
npm run dev
▼実行例
$ npm run dev
99% done plugins BuildOutputPlugin
Laravel Mix v6.0.10
✔ Compiled Successfully in 1143ms
┌───────────────────────────────────────────────────────┬──────────┐
│ File │ Size │
├───────────────────────────────────────────────────────┼──────────┤
│ /js/app.js │ 596 KiB │
│ css/app.css │ 25 bytes │
└───────────────────────────────────────────────────────┴──────────┘
webpack.mix.jsの指示通り、jsファイルとcssファイルが作成される。
コンパイル結果の確認
生成されたapp.cssを確認する。今回はapp.scssと同じ内容が記述されていればOK。
h1 {
color: skyblue;
}
6. ブラウザに表示
サーバーを起動する。
php artisan serve
URLを入力。http://127.0.0.1:8000/scss
 |
|---|
狙い通りコンパイル後のCSSが反映されている。
7. 変更反映の自動化
$ npm run watchを実行すると、指定したコンパイル元のファイルに変更があった場合に、自動でコンパイルを実行する。
$ npm run watch
> @ watch /Users/s01386/projects/laravel/test-pj
> mix watch
ctrl + cでサーバーを停止すれば自動監視（mix watch）も停止する。
8. 本番用のコンパイル
$npm run productionを実行すると、本番用の圧縮したファイルを出力してくれる。
圧縮版は、改行やスペース、コメントアウトなどを削除したもの。
$ npm run production
> @ production /Users/s01386/projects/laravel/test-pj
> mix --production
99% done plugins BuildOutputPlugin
Laravel Mix v6.0.10
✔ Compiled Successfully in 5416ms
┌───────────────────────────────────────────────────────┬──────────┐
│ File │ Size │
├───────────────────────────────────────────────────────┼──────────┤
│ /js/app.js │ 84.8 KiB │
│ css/app.css │ 14 bytes │
└───────────────────────────────────────────────────────┴──────────┘
▼出力されたファイル
h1{color:red}
改行やスペースが削除されている。
9. URLの自動変換機能（オフにする方法も）
Laravel Mixの便利機能の一つで、urlで画像リソースを指定した場合に、対象のファイルをpublic/imagesフォルダにコピーし、コンパイル後のURLをコピー後のファイルのパスに変更する機能がある。
▼例
.example {
background: url('../../public/img/cat3.png');
}
↓ コンパイル
$ npm run dev
99% done plugins BuildOutputPlugin
Laravel Mix v6.0.10
✔ Compiled Successfully in 888ms
┌──────────────────────────────────────────────────────┬───────────┐
│ File │ Size │
├──────────────────────────────────────────────────────┼───────────┤
│ /js/app.js │ 596 KiB │
│ css/app.css │ 105 bytes │
│ images/cat3.png?204c4068c53d4775b6e9cb23998276cb │ 158 KiB │
└──────────────────────────────────────────────────────┴───────────┘
▼コンパイル後のCSSファイル
.example {
background: url(/images/cat3.png?204c4068c53d4775b6e9cb23998276cb);
}
画像がパラメータで指定されている。（画像名にパラメータはついていない）
自動コピー＆URL変換機能をオフにする
この機能をオフにして、指定したURLをそのままコンパイルしたい場合は、webpack.mix.js内にオプションメソッドで以下を追記する。
.options({
processCssUrls: false
});
▼実際のコード例
mix.sass('resources/sass/app.scss', 'public/css').options({
processCssUrls: false
});
10. 複数ファイルをワイルドカードで指定する
scssファイルがいくつもある場合、コンパイル元のファイルと出力先を個別に設定するのは手間。
npmのパッケージの一つであるglobを使うことでファイルをワイルドカードで指定できる。
const mix = require('laravel-mix');
const glob = require('glob');
glob.sync('resources/sass/*.scss').map(function(file) {
mix.sass(file, 'public/css');
});
・冒頭にconst glob = require('glob');を記述。
▼scssファイルが多いPJ例
▼jsのコンパイルもグローバル指定した場合の例
const mix = require('laravel-mix');
const glob = require('glob');
glob.sync('resources/sass/*.scss').map(function (file) {
mix.sass(file, 'public/css').options({
processCssUrls: false,
});
});
glob.sync('resources/js/*.js').map(function (file) {
mix.js(file, 'public/js');
});