Nuxt/Vuetify variables.scss not being compiled

0
votes

I just created a fresh Nuxt project with the built-in Vuetify plugin added, and trying to do some basic style customization. The Nuxt config is pretty much right out of the box:

vuetify: { customVariables: ['~/assets/variables.scss'], theme: { dark: false, themes: { light: { primary: colors.blue.darken2, accent: colors.grey.darken3, secondary: colors.amber.darken3, info: colors.teal.lighten1, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3 } } } }, And all I've added to assets/variables.scss is this:

$font-size-root: 14px; $body-font-family: 'Cormorant Garamond', serif;

But neither setting is being picked up. I noticed that changing the variables.scss file does not trigger a compile when running the dev server, nor does restarting the dev server pick up the changes. I have a feeling there's something wrong with the config, even though this is almost right out of the box. What am I missing?

2
vuetify.jsnuxt.js

2 Answers

3
votes

vuetify variavles only working when treeShake is enabled, and by default its only in production mode. So it wont do anything in dev. You can enable treeShake for dev too, but keep in mind that it will significantly increase compile time of project.

And your variables should be sass, not scss

0
votes

Incase you do have treeshake enabled and it's still not working. Declaring treeShake and customVariables directly in the nuxt.config.js instead of the optionsPath file (can still declare colors there tho) worked..