How to connect stylus to nuxt?

Question

Vue.js

I suffer with the connection of stylus. I did everything as in the documentation https://nuxtjs.org/docs/2.x/features/configuration... , but I get an error:

this.getOptions is not a function at Object.stylusLoader

package.json

{
  "name": "nuxt-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "stylus": "^0.54.8",
    "stylus-loader": "^6.0.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "prettier": "^2.2.1"
  }
}

Help me to understand

Answer 1

In the comments, you were correctly noted about putting dependencies in the Dev branch, but stylus does not work for you, most likely for another reason. By default, stylus is already built into nuxt>4 versions. But in this version there is support with webpack> 5. It is not visible from the config, but I assume that you are using the 4+ version. It will require to demolish the current version of stylus-loader and install 3, which is under Webpack 4+