[NUXT]Customize Vuetify Sass variables

When you are using NUXT.JS and try to customize Vuetify Sass in the Vue framework, vuetify documentation was not explained.(2020/5)

How to install variables.scss in NUXT.JS

Vuetify can be customized by loading variables.scss(sass).
It becomes how to set it up in NUXT.JS.

---nuxt.config.js module.exports added to

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

TreeShaking has [prod] an initial value of "true", but [dev] is "false".
TreeShaking must be enabled for customization to be enabled.

Variables.scss writing sample

The sample of customization is put together on the following site.
SASS variables — Vuetify

If you have experience “customizing bootstraps” or understand “sass” variables, it's easy to set them up.

Customize Theme colors etc.

Theme — Vuetify

Even if you want to change the primary color etc., in case of NUXT.JS, describe it in nuxt.config.js .
By the way, if no theme is specified, the default is “light” theme.

Sample combined with above

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