CODEWITHSUNDEEP
vue.jssassvuetify.jsnuxt.jsstylus
Dwiky Ramadhan
Dwiky Ramadhan

Reputation: 45

How to fix "failed to locate @require file ~vuetify/src/stylus/settings/_colors.styl"

I'm using Nuxt and Vuetify version 1.5.6, and want to upgrade Vuetify to version 2.0.1. After upgrading Vuetify to version 2.0.1, I received an error like this:

ERROR in ./assets/style/app.styl

Module build failed (from ./node_modules/stylus-loader/index.js)

Error: /var/www/html/nuxt/my-project/assets/style/app.styl:3:10

1| // Import and define Vuetify color theme

2| // https://vuetifyjs.com/en/style/colors

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

failed to locate @require file ~vuetify/src/stylus/settings/_colors.styl

Does anyone know what is going on and how to fix that error?

I have tried some fixes and still get an error.

Here is my app.style:

@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

Upvotes: 3

Views: 4012

Answers (1)

Michael
Michael

Reputation: 5048

Vuetify no longer uses Stylus in version 2.x. You will need to manually copy all the stylus files into your project (which can be done from your node_modules) if you still want to use their color schemes. This will require you to have a Stylus loader in webpack. Or you can migrate to SASS and utilize their color schemes and variables; this is a pain but if you are sticking with Vuetify probably a good choice. Of course you could combine these two methods and do a gradual migration.

Upvotes: 1

Related Questions