Unable to override Vuetify 2.1 SASS variables

Question

I've been working through this issue for hours, and cannot come up with a solution. I've looked at several other StackOverflow posts that seem related (as well as the Vuetify docs), but nothing appears to be working for me. To start off, I'm simply trying to change the font-family from the default Roboto to Avenir. I receive no console errors or server errors.

@/styles/variables.scss

@import "~vuetify/src/styles/styles.sass";
$font-size-root: 14px;

@import "~vuetify/src/styles/settings/variables";
$body-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $main-font comes from my own ./_variables.scss.
$heading-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $title-font comes from my own ./_variables.scss.

@/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
    themes: {
      light: {
        primary: '#4A90E2',
        darkPrimary: '#3B73B4',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#a70000',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
        teal: '#64EBC6',
        green: '#7ED321',
        darkGreen: '#4c8f1d',
        lightGrey: 'rgba(0,0,0,0.12)',
        darkGrey: '#4A4A4A',
        textSecondary: 'rgba(0,0,0,0.4)',
      },
    },
  },
  icons: {
    iconfont: 'md',
  },
});

@/vue.config.js

module.exports = {
  transpileDependencies: [
    'vuetify',
  ],
  configureWebpack: {
    resolve: {
      // alias: {
      //   '~': path.resolve(__dirname, '../frontend/src'),
      // },
      extensions: ['*', '.js', '.vue', '.json'],
    },
  },
  // css: {
  //   loaderOptions: {
  //     scss: {
  //       prependData: '@import "@/styles/main.scss;"',
  //     },
  //   },
  // },
  // chainWebpack: config => {
  //   ['vue-modules', 'vue', 'normal-modules', 'normal'].forEach(match => {
  //     config.module.rule('scss').oneOf(match).use('sass-loader')
  //       .tap(opt => Object.assign(opt, { data: `@import '@/styles/main.scss'; ` }));
  //   });
  // },
};

Any help would be appreciated!

Unchurch

Answer 1

Set all top-level variables before importing Vuetify, so that Vuetify doesn't overwrite.

set these variables before Vuetify does

$font-size-root: 14px;
$body-font-family: 'Avenir Next', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
$heading-font-family: 'Avenir Next', 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 

Then, import _variables.style so that you can override the nested values:

@import '~vuetify/src/stylus/settings/_variables'

Now that the $material-dark hash exists, set the background

$material-dark.background = 'green'

Then, import the main.style so that the Vuetify CSS classes are created.

Unbonnet

Awesome answer. Couple of questions though: 1. You are referencing the .styl files, but I'm assuming that .scss would work the same way? 2. Also how do I know what is a "top-level variable" so that I make sure and set those above _variables.scss? 3. I'm assuming I don't actually need to set the background color, and that was only an example of when I would set it? – Unchurch

The above is just an example. Basically the concept is to set the variables before imports, else the variables in the imports will take high precedence and override the variable. In the stylus files, Vuetify uses conditional assignment operators. So if you set the variable before the @import, after the @import, it will continue. It is important since these variables are referenced internally by .scss. – Unbonnet

I see, that's very helpful! So essentially I'll just need to pore through their .scss files in node_modules/vuetify to figure out the names of the variables to override? – Unchurch

Yes that should help. Also see vue-loader's deep selectors >>> and also scoped css for having a much better grip of the css you write. – Unbonnet

Answer 2

Well 6 minutes after I posted this question, I commented out the import 'vuetify/dist/vuetify.min.css line in the vuetify plugin, and that appears to have correctly used the Avenir font I was looking for. Pretty classic. Hope this helps someone else!

Unchurch

Yes, that's because importing it before the variable assignment is actually overriding the font as I mentioned in my answer. Great that you solved it. – Unbonnet