Laravel5.6でのLaravel Mixの設定方法を詳しく解説!

engineering

Laravel Mix 設定方法

どうも、マサです。

現在、職場でLaravelフレームワークを使っているのですが、Laravel Mixの設定ではまってしまったことがあったので、その時の知見をシェアしようと思います。

なお、開発環境は以下になります。

開発環境

・centOS7

・Apache2.4

・MySQL5.7

・PHP7.2

・Laravel5.6

Laravel Mixとは

SCSSやJavaScriptなどのアセットをコンパイルするためのLaravelが提供しているAPIになります。

シンプルなメソッドチェーンを使用しているため、Webpackよりも簡単にコンパイルすることができます。

もちろんLaravel Mixを使わずに他のアセットコンパイルツールを使用してもいいですし、

使わなくてもいいのです。個人的な開発や軽く触ってみたい場合は、

Publicフォルダ直下に.jsファイルや.cssファイルを配置すればLaravelが読み込んでくれます。

ただ、今回はLaravel Mixに焦点を当てていきます。

Laravel Mixを使うまで

環境にNodeとnpmがインストールされていることが前提です。

Laravelをインストールするとpackage.jsonが自動的に作成されていると思うので、

してください。そうすると、webpack.mix.jsがLaravelプロジェクトに作成されます。

設定方法

webpack.mix.jsのデフォルトはこのように記述されているかと思います。

ハマりポイント

私はここでハマりました。他のサイトの多くでは、こちらのwebpack.mix.jsに設定を記述しているかと思います。確かに、こちらに設定を記述する方法もあるかと思うのですが、私の環境(ファイル群?)では

でエラーでこけてしまいました。

webpack.mix.jsの書き方は下記です。

解決方法

私の環境では、resource配下のjsフォルダとscssフォルダにいくつかのフォルダを配置していました。ここでは例えば、

jsフォルダにtest.js

scssフォルダにtest.scss

が配置されているとしましょう。

その場合は、デフォルトで配備されているapp.jsとapp.scssにこのように記述します。

//app.js

~

@import ‘test’;

~

 

//app.scss

~

@import ‘test’;

~

これでうまくいきました。app.jsとapp.scssと同じ階層にある(ここではtest.jsとtest.scss)ファイルをimportしています。

public直下にapp.jsとapp.scssがビルドします。

これで成功しました。resourcesフォルダ配下に.jsファイルや.scssファイルなどのアセットが増えてきても、appファイルに@importすれば簡単にビルドできますね。

終わりに

設定っていろいろ面倒ですよね。

できれば開発だけしていたいものですが。。。

コメント

%d人のブロガーが「いいね」をつけました。