vue.js - 如何修复 "failed to locate @require file ~vuetify/src/stylus/settings/_colors.styl"

Question

我正在使用 Nuxt 和 Vuetify 1.5.6 版，想将 Vuetify 升级到 2.0.1 版。将 Vuetify 升级到 2.0.1 版本后，我收到如下错误:

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

有谁知道发生了什么以及如何解决该错误？

我已经尝试了一些修复，但仍然出现错误。

这是我的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

Answer 1

Vuetify 在 2.x 版本中不再使用 Stylus。如果您仍想使用它们的配色方案，则需要手动将所有手写笔文件复制到您的项目中(这可以从您的 node_modules 完成)。这将要求你在 webpack 中有一个 Stylus 加载器。或者你可以迁移到 SASS 并使用它们的配色方案和变量；这很痛苦，但如果你坚持使用 Vuetify 可能是一个不错的选择。当然也可以结合这两种方式，逐步迁移。