Nuxt.js に stylus を導入する

stylus, stylus-loader のインストール

$ npm i stylus stylus-loader

するとエラーが出た。調べたところどうやら、

• Nuxt2 は Webpack 5 をサポートしていないよ
• Webpack 4 をサポートしてる　stylus-loader を使って！

とのこと。
最新はv7だけど、v3を使います。

Nuxt 2 doesn't yet support Webpack 5. Make sure the version of stylus-loader you are using supports Webpack 4, and downgrade your webpack version (or ideally let Nuxt handle that dependency for you).
https://github.com/nuxt/nuxt/issues/8763#issuecomment-773442564

style-resources-module　のインストール

コンポーネント内でもグローバルにある stylusファイルの変数や mixin が使えるようにするには、下記コマンドで style-resources-module　をインストールします。

$ npm i @nuxtjs/style-resources

package.json

  "dependencies": {
    "@nuxtjs/style-resources": "^1.2.1",
  }

nuxt.config.js

export default {
  ...
  buildModules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    stylus: [
      '~/assets/styles/app.styl'
    ]
  },
  ...
}