Vuetify,Nuxt , use tree shaking in Dev mode

Question

Using the Nuxt create-nuxt-app (https://nuxtjs.org/guide/installation#using-code-create-nuxt-app-code-) I selected Vuetify as my UI. (nuxt ^2 && Vuetify ^2)

Vuetify has a default background color of a shade of grey.
I just wanted to change that to white.

Easier said then done.

// nuxt.config.js

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

       // my other color changes...
          themes: {
            light: {
              primary: '#3EA0E1', // a color that is not in the default material colors palette
              accent: '#82B1FF',
              secondary: '#E7E7DE',
              info: '#1976D2',
              error: "#FF5252",
              success: "#4CAF50",
              warning: "#FFC107",
            }
          }
        }
      }

in variables.scss

  // /assets/variables.scss

    @import '~vuetify/src/styles/styles.sass';
    // change background to white..
    $material-light: map-merge($material-light, ( background: '#fff'));

Now when running : npm run dev it does not add the customVariables, apparently only in production.

On https://github.com/nuxt-community/vuetify-module#treeShake it is clearly stated that it only will work in production. So how do I develop my app with a background of white as example? I remember in previous versions ( 1.5) still using stylus , that this was not a problem.

I am fine if it does not "treeshake" the components in dev mode, but at least include my custom scss.

Anyone a clean workaround?

Jinseok Oh Jinseok Oh · Accepted Answer · 2019-10-08T07:47:58

If you want to use tree shaking in dev mode, explicitly add treeShake option to the vuetify option.

In your nuxt.config.js file,

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  theme: {
    themes: {
      light: {
        primary: '#3EA0E1', // a color that is not in the default material colors palette
        accent: '#82B1FF',
        secondary: '#E7E7DE',
        info: '#1976D2',
        error: "#FF5252",
        success: "#4CAF50",
        warning: "#FFC107",
      }
    }
  }
}

Vuetify,Nuxt , use tree shaking in Dev mode

1 Answers