Qfyilyi

I am trying to load a stylus file within nuxt.

First I installed the stylus package using npm i -D stylus stylus-loader

Then I created a file called app.styl in the assets/style folder :

@require '~vuetify/src/stylus/settings/_colors'

$theme := {

  primary:     $blue.darken-2

  accent:      $blue.accent-2

  secondary:   $grey.lighten-1

  info:        $blue.lighten-1

  warning:     $amber.darken-2

  error:       $red.accent-4

  success:     $green.lighten-2

}



// Import Vuetify styling

@require '~vuetify/src/stylus/main'



.page

  @extend .fade-transition

Then I added this to the css array in nuxt.config.js :

  /*

  ** Global CSS

  */

  css: [{ src: '~assets/style/app.styl', lang: 'styl'}],

But then nuxt.js is throwing an error in build :

× error friendly-errors » Failed to compile with 1 errors

> log friendly-errors » This dependency was not found:

> log friendly-errors » * ..assetsstyleapp.styl in ./.nuxt/App.js

> log friendly-errors » To install it, you can run: npm install --save ..assetsstyleapp.styl

In my package.json I have the version of nuxt to ^2.3.1, stylus to ^0.54.5 and stylus-loader of ^3.0.2.

Full link to package.json and nuxt.config.js

Can you find what is wrong with my setup using these informations ?

Nuxt asset folder path should be like this for nuxt js version 2

 /*

  ** Global CSS

  */

  css: [{ src: '~/assets/style/app.styl', lang: 'styl'}]

I hope it will solve your problem