Vuetify-module: Different html font-size between Dev and SSR

[andrewspy]

Module version
1.2.1

Describe the bug
With Dev (i.e. yarn dev), main.sass style html as:

html {
  font-size: 16px;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

With SSR (i.e. nuxt.render(req, res)), rendered page style html as:

html {
  font-size: 20px;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0,0,0,0)
}

To Reproduce

Using create-nuxt-app with vuetify template, and the SSR is at:
https://x-nuxt-app.web.app/

Expected behavior
html font size should be the same.

Screenshots

Additional context
I'm new to nuxt, and not 100% sure if I deploy nuxt SSR correctly to firebase cloud functions...

[kevinmarrec]

Hey @andrewspy 😃

Well it's cause the template created by create-nuxt-app, when selecting Vuetify framework, showcases the customVariables module option.

See :
https://github.com/nuxt/create-nuxt-app/blob/master/template/nuxt/nuxt.config.js#L133
https://github.com/nuxt/create-nuxt-app/blob/master/template/frameworks/vuetify/assets/variables.scss

You can check your nuxt.config.js and assets folder, removing the file and the option will make it good.

---

I think it shouldn't be showcased in the generated project, to prevent unexpected behavior when starting playing with or deploying the project.

/cc @ricardogobbosouza @clarkdo

[andrewspy]

Thanks! I think it should have just be commented out as follow:-

// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
//
// The variables you want to modify
// $font-size-root: 20px;

[kevinmarrec]

@andrewspy Indeed, I like it, we'll update it 😃. Thanks for your feedback !