LarvelでStylusを使う方法

LaravelでStylusを使う方法を紹介します。
最近では、フロントエンドはフロントのフレームワーク
バックエンドではLaravelを使うケースが増えてきているので
あまり使う機会がないかもしれませんが、自分が忘れないためにも記載しておきます。

環境

まずは、webpack.mix.jsに下記を追記します。

mix.js('resources/js/app.js', 'public/js')
    .stylus('resources/stylus/app.styl', 'public/css'); // この行追記

第１引数はデバックを行うファイルのパスを記載
laravelではresourceshtmlやcssを記載してくことが多いです。

'resources/stylus/app.styl'

第２引数にはコンパイル後のファイルの保存先を指定します。
laravelでは、public配下がホームディレクトリとなるので、吐き出し先はpublicのままで問題ないかと思います。

'public/css' // コンパイル後の書き出し先のディレクトリ

※npmがインストールされいない場合はnpmのインストールを事前に行ってください。

npm i // npmのインストール

npmのインストールを行います。
npmのインストールが終わるとpackage.jsonが作成されます。

npm run dev

上記を実行すると、コンパイルされます。
今回は、/public/css/app.cssのファイルが作成されていればOKです。

上記でnpmを実行したあと、下記コマンドを実行します。

npm run watch

該当のstylusファイルに変更があったとき、自動でコンパイルされるようになります。
便利なのでセットで覚えておくと効率的に作業ができると思います。