15

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!

J. Jackson
  • 3,326
  • 8
  • 34
  • 74

2 Answers2

5

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!

J. Jackson
  • 3,326
  • 8
  • 34
  • 74
  • 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. – Sreeram Nair Oct 16 '19 at 03:38
5

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.

Saeed
  • 3,294
  • 5
  • 35
  • 52
Sreeram Nair
  • 2,369
  • 12
  • 27
  • 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? – J. Jackson Oct 16 '19 at 03:45
  • 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`. – Sreeram Nair Oct 16 '19 at 03:53
  • 1
    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? – J. Jackson Oct 16 '19 at 03:56
  • Yes that should help. Also see `vue-loader`'s [deep selectors](https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) `>>>` and also [scoped css](https://vue-loader.vuejs.org/guide/scoped-css.html) for having a much better grip of the css you write. – Sreeram Nair Oct 16 '19 at 04:30