Vuetify2.xのカスタムSASS変数を定義してコンポーネント内で使う方法

Vuetifyの公式ドキュメントを含めてカスタムSASS変数を定義してコンポーネント内で使う方法、どこにも書いてなかったんだな・・・適当な記事ばっかり

Step 1.

assets/variables.scssにカスタム変数を追加

$my-title-color: #6d7793 !default;

Step 2.

nuxt.config.jsを修正

nuxt.config.js

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,

Step 3.

コンポーネント内で使う

<style lang="scss" scoped>

.my-title {
  color: $my-title-color;
}

</style>

Step3で使えないよ？

~/assets/variables.scssが読み込まれてない！！って人へ。
package.jsonにあるnode-sassとかsass-loaderとかを消したらうまくいくかも。