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

0

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'
                }
            }
        },
    },

NUXT.JSおすすめの書籍

Googleで検索したり、NUXT.JSのホームページのドキュメントで、大体の疑問や使い方は理解できると思うのですが体系的に学ぼうとするとやはり書籍が良いと思っています。下記は、おすすめの書籍です。
書籍版は高いですが、Vue.jsもカバーしていてわかりやすいです。
Vue.js&Nuxt.js超入門