[NUXT.JS]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'
                }
            }
        },
    },

NUXT.JS Recommended Books

I think that you can understand most of the questions and how to use it by searching on Google or by searching the documents on the NUXT.JS homepage, but if you try to learn systematically, I think books are good. The following are recommended books.
The book version is expensive, but it also covers Vue.js and is easy to understand.
Building and Testing Vue 2 Apps with Vue Router, Vuex, and Nuxt: A Guide on Building Client Side and Server Side Rendered Front End Web Apps