如何修复“无法找到 @require 文件 ~vuetify/src/stylus/settings/_colors.styl”

Question

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

./assets/style/app.styl 中的错误

模块构建失败（来自 ./node_modules/stylus-loader/index.js）

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

1| // 导入并定义 Vuetify 颜色主题

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

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

未能找到@require 文件~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 可能是一个不错的选择。当然你也可以结合这两种方法，逐步迁移。