Laravel MixをインストールしてSassを利用する

「Laravel」で「Sass」を利用して開発したい場合「Laravel Mix」というビルドツールを利用すると手早く実現することができます。

Node.jsをインストールする

「Laravel Mix」を利用するには「Node.js」が必要になります。「Node.js」をまだインストールしていない人は「Node.jsをインストールする」でインストールを行ってください。

Laravel Mixをインストールする

「Laravel Mix」は「npm」コマンドでインストールすることができます。※実行中にWARNが出ることがありますがここでは無視することとします。

$ cd /home/yourname/projectname
$ npm install
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
・・・
run `npm fund` for details
found 0 vulnerabilities

Laravel Mixを実行する

正常にインストールができたら実際に「Laravel Mix」を利用して「Sass」をコンパイルしてみます。

$ cd /home/yourname/projectname
$ npm run dev
> @ dev /home/yourname/projectname
> npm run development
・・・・・
/css/app.css  0 bytes  /js/app  [emitted]  /js/app
  /js/app.js  592 KiB  /js/app  [emitted]  /js/app

上記のように実行結果が表示されればコンパイルは正常に完了となります。コンパイル方法は「npm run dev」以外にも本番用にファイルを圧縮もしてくれる「npm run producetion」なども存在します。参照：Laravel 6.x アセットのコンパイル(Mix)

それではみなさん、自由なWEBライフをお過ごしください！