Overriding Vuetify variables doesn't work

[unguul]

Description

I've set up Gridsome with Vuetify. As per the docs, we can override things like basic font size across the application. However, this doesn't seem to work in the context of Gridsome. I tried this with the vuetify loader which should work by just placing the SASS variables in src/scss/variables.scss. I've also tried it without the vuetify loader.

Steps to reproduce

I created a fresh Gridsome project and added Vuetify with vuetify-loader.

https://github.com/unguul/gridsome-big-font

Expected result

Font size should be increased across the application.

Actual result

Font size is the same.

Environment

  System:
    OS: Linux 5.19 Ubuntu 22.10 22.10 (Kinetic Kudu)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 106.0
  npmPackages:
    gridsome: ^0.7.0 => 0.7.23 
  npmGlobalPackages:
    @gridsome/cli: 0.3.4