[NUXT.JS]Vuetify Sass variables をカスタマイズする

NUXT.JSを使用していて、VueフレームワークのVuetifyのSassをカスタマイズしようとした時、Vuetifyのマニュアルに説明がなかったので記載しておきます。(2020/5)

NUXT.JSでのvariables.scssの設置方法

Vuetifyはvariables.scss(sass)を読み込ませることで、カスタマイズすることが可能です。
NUXT.JSでの設定方法になります。

---nuxt.config.js のmodule.exportsに追加

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

treeShakingは[prod]では初期値が”true”ですが、[dev]では”false”になっているそうです。
カスタマイズを有効にするには、treeShakingを有効にする必要があります。

variables.scssの書き方サンプル

カスタマイズのサンプルは下記サイトにまとまっています。
SASS variables — Vuetify

bootstrapのカスタマイズの経験があったり、SASSの変数を理解していれば、簡単に設定できると思います。

Themeのカラー等をカスタマイズする

Theme — Vuetify

primaryカラー等変更したい場合も、NUXT.JSの場合はnuxt.config.jsに記載する。
ちなみに、テーマを指定していない場合は、defaultでは”light”のテーマになる。
上記と合わせたサンプル

    vuetify: {
        customVariables: ['~assets/scss/variables.scss'],
        treeShaking: true,
        theme: {
            themes: {
                light: {
                    primary: '#1976D2',
                    secondary: '#424242',
                    accent: '#82B1FF',
                    error: '#FF5252',
                    info: '#2196F3',
                    success: '#4CAF50',
                    warning: '#FB8C00'
                },
                dark: {
                    primary: '#2196F3',
                    secondary: '#424242',
                    accent: '#FF4081',
                    error: '#FF5252',
                    info: '#2196F3',
                    success: '#4CAF50',
                    warning: '#FB8C00'
                }
            }
        },
    },