【Nuxt.js】Vuetify + StylusでFont awesomeをインストールしたときのエラーと対処

Nuxt.jsにVuetifyを導入、StylesheetにStylusを使用。iconにFontawesomeを使用したいと思い、インストール時エラーがでました。
そのときの対処法を記載します。
# VuetifyにFontawesomeを導入する
通常のNuxt.jsにFontawesomeをインストールする場合nuxt-fontawesomeがあるのですが、今回はvuetifyの公式にインストール方法が書いてあったのでそれを元にインストールします。
https://vuetifyjs.com/ja/customization/icons#install-font-awesome-5-icons

## まずはインストール

```
$ yarn add @fortawesome/fontawesome-free -D
```
## インストールしたCSSをインポート
インストール後、パッケージ内のall.cssをインポートするので、pluginsファルダ直下にvuetify.jsというファイルを作成してください。

```vuetify.js
import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'fa'
  }
})  
```
## ファイルの読み込みの設定
次にplugins/vuetify.jsファイルを読み込みため、nuxtconfig.jsを編集します。

```
  plugins: [
    'plugins/vuetify'
  ],
```

## Fontawesaomeのiconが表示するか確認する
Fontawesaomeのiconが表示するか確認します。
使用の仕方は<v-icon>にfasと使用するアイコン名（例：fa-lockなど）で表示できます。 

```index.vue
<v-col cols="12">
  <v-row justify="space-around">
    <v-icon>fas fa-lock</v-icon>
    <v-icon>fas fa-search</v-icon>
    <v-icon>fas fa-list</v-icon>
    <v-icon>fas fa-edit</v-icon>
    <v-icon>fas fa-tachometer-alt</v-icon>
    <v-icon>fas fa-circle-notch fa-spin</v-icon>
  </v-row>
</v-col>
```

## セット後エラー
セット後確認をしたらエラーが表示されました。

```
 ERROR  in ./node_modules/vuetify/src/styles/main.sass                                                                                                                                            friendly-errors 09:17:38

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                                                                                friendly-errors 09:17:38
SassError: Can't find stylesheet to import.
  ╷
2 │ @import '~/assets/variables.scss'
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  /Users/hiroyuki/Myworks/ACALL-service/acall-service/node_modules/vuetify/src/styles/main.sass 2:9  root stylesheet
                                                                                                                                                                                                  friendly-errors 09:17:38
 @ ./node_modules/vuetify/src/styles/main.sass 4:14-194 14:3-18:5 15:22-202
 @ ./node_modules/vuetify/lib/presets/default/index.js
 @ ./node_modules/vuetify/lib/services/presets/index.js
 @ ./node_modules/vuetify/lib/services/index.js
 @ ./node_modules/vuetify/lib/framework.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./plugins/vuetify.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
```

エラー内容をみたら

```
@import '~/assets/variables.scss'
```
がありました。
現在のファイル構成は下記のようになっておりvariables.scssは使っていません。

```
├ assets
  └ stylus
    ├ _mixins.styl 
    └ _variables.styl 
```

### nuxt.config.jsを確認
nuxt.config.jsにcustomVariables: ['~/assets/variables.scss']が書かれているのでこちらを触ってみまいした。

```nuxt.config.js
   vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      light: true,
      themes: {
        light: {
          -------------------------------
        }
      }
    }
  },
```
## エラーの対処
まず['~/assets/stylus/_variables.styl']に変更してみましたがエラーのまま。
次にcustomVariables: ['~/assets/variables.scss']これ自体を削除。エラーはでませんでしたがこちらを削除するのは後々なにかありそうなので

```
├ assets
  └ stylus
    ├ _mixins.styl 
    └ _variables.styl 
  └ variables.scss
```
空ファイルですがvariables.scssをここに追加しておきました。
エラーなく正常に稼働しました。

現在は空ファイルですが、後々使うことがあるのでしょうか？
もっとスマートなやり方がありましたら教えて下さい。