Unable to override Vuetify 2.1 SASS variables

user_3394654 0
Viewed 8407

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!

vue-cli-3 vuetify.js
2 Answers

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!

user_33946540

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.

user_18532430
Related