Hey there after installed the module and loaded the config into nuxt.config.js my font

Font size shrinks after installing module about tiptap-vuetify-nuxt HOT 1 CLOSED

polymer-coder commented on May 20, 2024

Font size shrinks after installing module

from tiptap-vuetify-nuxt.

Comments (1)

polymer-coder commented on May 20, 2024

It turns out that this module was somehow enabling treeshaking in vuetify. When treeshaking is enabled, vuetify looks at your custom variables (by default this is in '~/assets/variables.scss') and in my case I had a variable called $font-size-root: 12px;

Changing that variable to 16px ($font-size-root: 16px;) restored the font to it's original size. For completeness, my vuetify config and variables.scss are listed below:

nuxt.config.js

  // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,  
    defaultAssets: false,
    theme: {
      dark: false,
      light: true,

      themes: {
        light: {
          ansaaccent: '#FFD046', //Yellow
          ansaprimary: '#0361A9', //Dark blue
          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
        },
        dark:{
          ansaaccent: '#FFD046', //Yellow
          ansaprimary: '#0361A9', //Dark blue
          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
        }
      }
    }
  },

variables.scss

// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
//
// The variables you want to modify
$font-size-root: 16px;
@import '~vuetify/src/styles/styles.sass';

from tiptap-vuetify-nuxt.

Recommend Projects