Nuxt4でpugとstylus使うぞ！

Nuxt2やNuxt3の古い情報があり、なかなかこの辺りの最新情報がなかったりするのではないでしょうか？
割と簡単に設定できそうなことが公式には書いてるのですが、stylusで自分は苦労したので、同じようにハマってる人は参考になるかもしれません。

pug

これは超簡単。

npm i -D pug

これだけ！
Nuxt2とかで必要だった pug-plain-loader は viteになったので不要です。

stylus

これも基本的に使うだけなら超簡単

npm i -D stylus

これだけ！
ただ、ここまでだと、自作のmixinとかのファイルをコンポーネントから便利に呼び出したり、共通のcssを当てたstylファイルを呼び出したりができていません。
この2つに苦戦しました。

ファイルの置き場所

Nuxt4からは app ディレクトリができたので、この下に assets を追加して置いておくのが一般的っぽいです。
assets/stylus/set.styl がmixinや定数などが詰まったファイル。
assets/stylus/all.styl が全体のcssのファイルと今回はしておきます。

全体にstylファイルを適用する

viteになってから nuxt.config.ts の css 項目で呼び出せます。

nuxt.config.ts

export default defineNuxtConfig({

  css: ['~/assets/stylus/all.styl'],

})

この設定をいれましょう。
注意すべきは all.styl 内に mixinなどを利用している時。
この場合はあとでmixin等を呼び出す設定をいれてもこの all.stylからは見れてない判定となるので、all.styl 内にmixinファイルを呼び出す記述をいれましょう。

vueコンポーネントからmixinのファイルを呼び出す

各ファイルに設定することもできますが、それも癖がありそうで、scssなどでは
@import ~/assets/stylus/set.styl 的なことを書けば動きそうな情報があったのですが、stylusはこの ~ の扱いが他と違うような振る舞いをしてそうでした。
最終的にうまく行ったのは nuxt.config.ts で以下の記述でいけました。

nuxt.config.ts

import path from "path";

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        stylus: {
          additionalData: `@import "${path.resolve(__dirname, 'app/assets/stylus/set.styl')}"`
        },
      },
    },
  },
})

このパス周りがうまくいかなくて試行錯誤した結果です。