vuetify.jsvuetify-loadervuetifyjs3

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

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. enter image description here

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) enter image description here

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

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

Solution

  • 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.