title: How to add css-loader and stylus-loader into nuxt.config.js?
body: <p>I create an <a href="https://nuxtjs.org/guide/installation" rel="nofollow noreferrer">Nuxt.js</a> skeleton:</p>
  
  <pre><code>yarn create nuxt-app myapp
  </code></pre>
  
  <p>Then I add css-loader and stylus loader:</p>
  
  <pre><code>yarn add css-loader
  yarn add stylus stylus loader
  </code></pre>
  
  <p>I then add them to nuxt.config.js:</p>
  
  <pre><code>build: {
      /*
      ** You can extend webpack config here
      */
      extend(config, ctx) {
        // Run ESLint on save
        if (ctx.isDev &amp;&amp; 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)/
          })
        }
      }
    }
  </code></pre>
  
  <p>I get this when I run <code>yarn run dev</code>:</p>
  
  <pre><code>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&amp;type=style&amp;index=0&amp;lang=css&amp;
  
  Syntax Error: SyntaxError
  
  (1:1) Unknown word
  
  &gt; 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&amp;type=style&amp;index=0&amp;lang=css&amp; 4:14-403 14:3-18:5 15:22-411
   @ ./.nuxt/components/nuxt-error.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
   @ ./.nuxt/components/nuxt-error.vue
   @ ./.nuxt/index.js
   @ ./.nuxt/client.js
   @ multi webpack-hot-middleware/client?name=client&amp;reload=true&amp;timeout=30000&amp;path=/__webpack_hmr ./.nuxt/client.js
  
   error  in ./.nuxt/components/nuxt-loading.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
  
  Syntax Error: SyntaxError
  
  (1:1) Unknown word
  
  &gt; 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&amp;type=style&amp;index=0&amp;lang=css&amp; 4:14-405 14:3-18:5 15:22-413
   @ ./.nuxt/components/nuxt-loading.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
   @ ./.nuxt/components/nuxt-loading.vue
   @ ./.nuxt/App.js
   @ ./.nuxt/index.js
   @ ./.nuxt/client.js
   @ multi webpack-hot-middleware/client?name=client&amp;reload=true&amp;timeout=30000&amp;path=/__webpack_hmr ./.nuxt/client.js
  
   error  in ./components/Logo.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
  
  Syntax Error: SyntaxError
  
  (1:1) Unknown word
  
  &gt; 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&amp;type=style&amp;index=0&amp;lang=css&amp; 4:14-379 14:3-18:5 15:22-387
   @ ./components/Logo.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
   @ ./components/Logo.vue
   @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./pages/index.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./pages/index.vue
   @ ./.nuxt/router.js
   @ ./.nuxt/index.js
   @ ./.nuxt/client.js
   @ multi webpack-hot-middleware/client?name=client&amp;reload=true&amp;timeout=30000&amp;path=/__webpack_hmr ./.nuxt/client.js
  
   error  in ./components/VuetifyLogo.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
  
  Syntax Error: SyntaxError
  
  (1:1) Unknown word
  
  &gt; 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&amp;type=style&amp;index=0&amp;lang=css&amp; 4:14-386 14:3-18:5 15:22-394
   @ ./components/VuetifyLogo.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
   @ ./components/VuetifyLogo.vue
   @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./pages/index.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./pages/index.vue
   @ ./.nuxt/router.js
   @ ./.nuxt/index.js
   @ ./.nuxt/client.js
   @ multi webpack-hot-middleware/client?name=client&amp;reload=true&amp;timeout=30000&amp;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&amp;type=style&amp;index=0&amp;lang=css&amp;
  
  Syntax Error: SyntaxError
  
  (1:1) Unknown word
  
  &gt; 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&amp;type=style&amp;index=0&amp;lang=css&amp; 4:14-403 14:3-18:5 15:22-411
   @ ./.nuxt/components/nuxt-error.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
   @ ./.nuxt/components/nuxt-error.vue
   @ ./.nuxt/index.js
   @ ./.nuxt/client.js
   @ multi webpack-hot-middleware/client?name=client&amp;reload=true&amp;timeout=30000&amp;path=/__webpack_hmr ./.nuxt/client.js
  
   error  in ./.nuxt/components/nuxt-loading.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
  
  Syntax Error: SyntaxError
  
  (1:1) Unknown word
  
  &gt; 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&amp;type=style&amp;index=0&amp;lang=css&amp; 4:14-405 14:3-18:5 15:22-413
   @ ./.nuxt/components/nuxt-loading.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
   @ ./.nuxt/components/nuxt-loading.vue
   @ ./.nuxt/App.js
   @ ./.nuxt/index.js
   @ ./.nuxt/client.js
   @ multi webpack-hot-middleware/client?name=client&amp;reload=true&amp;timeout=30000&amp;path=/__webpack_hmr ./.nuxt/client.js
  
   error  in ./components/Logo.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
  
  Syntax Error: SyntaxError
  
  (1:1) Unknown word
  
  &gt; 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&amp;type=style&amp;index=0&amp;lang=css&amp; 4:14-379 14:3-18:5 15:22-387
   @ ./components/Logo.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
   @ ./components/Logo.vue
   @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./pages/index.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./pages/index.vue
   @ ./.nuxt/router.js
   @ ./.nuxt/index.js
   @ ./.nuxt/client.js
   @ multi webpack-hot-middleware/client?name=client&amp;reload=true&amp;timeout=30000&amp;path=/__webpack_hmr ./.nuxt/client.js
  
   error  in ./components/VuetifyLogo.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
  
  Syntax Error: SyntaxError
  
  (1:1) Unknown word
  
  &gt; 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&amp;type=style&amp;index=0&amp;lang=css&amp; 4:14-386 14:3-18:5 15:22-394
   @ ./components/VuetifyLogo.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
   @ ./components/VuetifyLogo.vue
   @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./pages/index.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./pages/index.vue
   @ ./.nuxt/router.js
   @ ./.nuxt/index.js
   @ ./.nuxt/client.js
   @ multi webpack-hot-middleware/client?name=client&amp;reload=true&amp;timeout=30000&amp;path=/__webpack_hmr ./.nuxt/client.js
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Why I added these loaders into nuxt.config.js? Because, for instance, on <a href="https://github.com/webpack-contrib/css-loader" rel="nofollow noreferrer">here</a> 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 <a href="https://nuxtjs.org/faq/extend-webpack" rel="nofollow noreferrer">similarly</a> to what I did (I suppose)</p>