タイトル通りですが、対象読者はNuxt.jsにVuetify（@nuxtjs/vuetify）をインストール後、VuetifyのSASS変数を変更するためにvariables.scssを作成したけど反映されずに困ってる方です。
結果的には@nuxtjs/vuetify のページをじっくり読めば問題なかったのですが、要点だけ書いておきます。
1. customVariablesの設定
nuxtjs/vuetifyのcustomVariables部分を読むと、customVariablesオプションについて以下のように書かれてます。
Provide a way to customize Vuetify SASS variables.
一例として以下のようにサンプルが載ってます。
vuetify: {
customVariables: ['~/assets/variables.scss']
}
※ customVariablesはNuxt.jsをインストールする際、テンプレートにVuetifyを選択すると最初から記述されてます。
2. treeShake: trueの設定
Nuxt.jsを開発モードで起動した場合、以下の内容通りcustomVariablesを設定するだけではvariables.scssの内容は反映されません。
Provide a way to customize Vuetify SASS variables.
Only works with tree-shaking.
実はこのtree-shaking はリンク先の記載通りデフォルトではproductionモードでしか機能しないため、yarn run devのように開発モードで実行すると機能しません。そのため上記で設定したvariables.scssが反映されずになんで？？？？となったのがこの記事投稿のきっかけでした。
最終的にはnuxt.config.jsにtreeShake: trueの一文を加えるだけでOKでした。
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
}
// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
//
// The variables you want to modify
$font-size-root: 20px;
これでassets/variables.scssを変更して保存すれば自動的にコンパイルされて変更内容が画面に反映されるようになりました。ただしコンパイル時間は若干かかります。
最後に
恐らくこの問題はNuxt.jsのインストール時のテンプレートにVuetifyを選択した人が一番ハマりやすいと思います。理由はnuxt.config.jsにcustomVariablesのオプションは最初から記載してあり、ご丁寧にassets/variables.scssも用意してるのにtreeShakeについては全く記述がないからです。