How to add css-loader and stylus-loader into nuxt.config.js?

Question

I create an Nuxt.js skeleton:

yarn create nuxt-app myapp

Then I add css-loader and stylus loader:

yarn add css-loader
yarn add stylus stylus loader

I then add them to nuxt.config.js:

build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
        config.module.rules.push({
          test: /\.css$/,
          loader: ['css-loader', 'stylus-loader'],
          exclude: /(node_modules)/
        })
      }
    }
  }

I get this when I run yarn run dev:

begueradj@begueradj:~/myapp$ yarn run dev
yarn run v1.10.1
$ nuxt


 INFO  Building project

✔ success Builder initialized
✔ success Nuxt files generated


 ERROR  Failed to compile with 4 errors                                                                                                                         16:03:01

 error  in ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& 4:14-403 14:3-18:5 15:22-411
 @ ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt/components/nuxt-error.vue
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& 4:14-405 14:3-18:5 15:22-413
 @ ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt/components/nuxt-loading.vue
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./components/Logo.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=style&index=0&lang=css& 4:14-379 14:3-18:5 15:22-387
 @ ./components/Logo.vue?vue&type=style&index=0&lang=css&
 @ ./components/Logo.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css& 4:14-386 14:3-18:5 15:22-394
 @ ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&
 @ ./components/VuetifyLogo.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js



 READY  Listening on http://localhost:3000



 ERROR  Failed to compile with 4 errors                                                                                                                         16:03:02

 error  in ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& 4:14-403 14:3-18:5 15:22-411
 @ ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt/components/nuxt-error.vue
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& 4:14-405 14:3-18:5 15:22-413
 @ ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt/components/nuxt-loading.vue
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./components/Logo.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=style&index=0&lang=css& 4:14-379 14:3-18:5 15:22-387
 @ ./components/Logo.vue?vue&type=style&index=0&lang=css&
 @ ./components/Logo.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css& 4:14-386 14:3-18:5 15:22-394
 @ ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&
 @ ./components/VuetifyLogo.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

What am I doing wrong?

EDIT:

Why I added these loaders into nuxt.config.js? Because, for instance, on here it says installing the loader is not enough unless you extend the webpack configuration. And to do so in Nuxt, we have to do it similarly to what I did (I suppose)

Answer 1

[Quite a long delayed answer. But will help someone for recent nuxt versions (^2.14)]

A solution from issue discussion nuxt issue with ref to webpack stylus options and for nuxt latest (2.14.7),

extend webpack configuration mapping all loaders,

build: {
    extend (config, { isDev, isClient }) {
      [].concat(...config.module.rules.find(e => e.test.toString().match(/\.styl/)).oneOf.map(e => e.use.filter(e => e.loader == 'stylus-loader'))).forEach(stylus => { 
        Object.assign(stylus.options, {
          //preferPathResolver: 'webpack',
          sourceMap: true,
          stylusOptions: { 
            //use: ['nib'],
            include: ['~assets/styles'],  //include all styl files from folder
            import: [
              '~assets/style/main.styl',  //your main styl file
            ],
          },
        })
        //console.log(stylus)
      }) 
    },

this imports the files and include stylus folder as well.

Answer 2

Your discussion helps me! My steps(if you have stylus globally):

npm install stylus-loader stylus --save-dev

And that's it. After that you can automatically use stylus in your project.