Using Scss Variable Overrides in Vue 3 with Vuetify 3 Beta Using Vue CLI

Question

I am working on a project using Vue 3, Vuetify 3.0.0 (beta 0), and the latest Vue-CLI. I am trying to customize the vuetify font, however every method i've found online to override the vue sass variables has not worked.

The first attempt I made was was using the Vuetify documentation on the vuetify website: https://next.vuetifyjs.com/en/features/sass-variables/

Using a default project, I added a styles directory and variables.scss file as directed. Inside the variables.scss file I have the following contents:

$body-font-family: cursive;

Digging through the variables inside the Vuetify lib directory It looks like this variable I needed to override (and while I will be using a custom font, for now cursive should ensure a different enought font to validate it works).

This did not work, I tried changing the directory to scss and got the same results (it does not import) see the result image below.

So my second attempt was following the documentation found ing the vue.config.js file where it points to https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader#customising-variables . This led to me changing my vue.config.js file to look like:

const { defineConfig } = require("@vue/cli-service");
const { VuetifyLoaderPlugin } = require("vuetify-loader");

module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: {
    plugins: [new VuetifyLoaderPlugin({ styles: "expose" })],
  },

  pluginOptions: {
    vuetify: {
      // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
    },
  },
});

with a main.scss file added to the plugins dir with the following contents:

// main.scss
$font: cursive !important;

@use 'vuetify/styles' with (
  $color-pack: false,
  $utilities: false,
  $body-font-family: $font
);

This basically removed all formating from the page but did not change the text to a cursive font (see image below)

At this point I have been searching online and been unable to find anything that has worked:

• Initial research led me Change default font in vuetify this is where I got my first two approaches, I did not have luck with the sass loaders either.
• In the git repo https://github.com/vuetifyjs/vuetify-loader/issues/221 seems to pose a similar question but lead to no results
• How to override vuetify 3 components sass variable with vue 3 poses a similar question but lacked the depth

Here is a git repo with my current code: https://github.com/dragonman117/Vuetify-Theme-Test

Odaniel

Answer 1

I just fought with this for a solid 2 hours and FINALLY figured it out. Stumbled upon your question and figured I'd throw you a bone, even if it is 3 months later.

The problem currently is that the Vuetify 3 docs for this are not up to date. I'm going to try my hand at updating the docs in a PR after this. The key missing piece is that vuetify-loader was used for Vuetify 2, but Vuetify 3 is using the new wepback-plugin-vuetify. I figured that out when I stumbled upon vuetify-loader's "next" branch (see the README).

Anyway, here's all you need for when you're using a Vue CLI installation.

vuetify.ts

import @/styles/variables.scss;
// the rest of your vuetify.ts file...

variables.scss

@use "vuetify/styles" with (
  $body-font-family: "Comic Sans"
);

Edit: Also, I just started having issues with including commas in my font family in that list after the "with," so I ended up doing the following. This may not be the best SASSy solution for this, but idk their syntax well enough to come up with something else atm:

variables.scss

$body-font-family: Inter, sans-serif;

@use "vuetify/styles" with (
  $body-font-family: $body-font-family
);

Hope this helps. Good luck.

Translate

It's been one year and this is still the answer. It's pretty incredible that Vue 3's docs are still outdated. – Attitudinarian

Oh good, another reason for me to hate it 😂. (Tbf, these were about Veutify’s docs. Still mad about it tho.) – Translate

Answer 2

And if you want to override default typography settings:

@use 'vuetify/settings' with (
  $heading-font-family: Comic Sans,
  $body-font-family: Comic Sans,
  $typography: (
    'h1': (
      'size': 2rem,
      'weight': 500,
      'line-height': 2.2rem,
      'letter-spacing': 0,
      'font-family': Comic Sans,
      'text-transform': none
    ),
  ),
),

Turnout

Answer 3

Update (as 2023-04) (using Nuxt 3.2.0 + Vuetify 3.1.4)

There's no need to import the variables file. I just set the configFile in the vite plugin to point to the variables path file.

  // nuxt.config.ts
  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) =>
        // @ts-ignore
        config.plugins.push(
          vuetify({
            styles: { configFile: "assets/scss/variables.scss" },
          })
        )
      );
    },
  ],

Credits to: https://github.com/BayBreezy/vuetify3-nuxt3-sass-customized

Tainataint