title: Override Vuetify 2.0 sass variable $heading-font-family
body: <p>In Vuetify 2.0.0-beta.0 I try to override the default variable $heading-font-family. This isn't working. However I can override e.g. $body-font-family, $font-size-root or $btn-border-radius.</p>
  
  <p>I've followed the documentation from <a href="https://next.vuetifyjs.com/en/framework/theme" rel="noreferrer">https://next.vuetifyjs.com/en/framework/theme</a></p>
  
  <p>My main.scss looks like this:</p>
  
  <pre><code>
  // main.scss
  
  @import '~vuetify/src/styles/styles.sass';
  
  // The variables I want to modify
  $font-size-root: 16px;
  $body-font-family: Arial, sans-serif;
  $heading-font-family: 'Open Sans', sans-serif;
  $btn-border-radius: 8px;
  
  </code></pre>
  
  <p>My .vue file has a template with this HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>// in my vue Template
  
  ...
  &lt;div class="hello"&gt;
    &lt;h1 class="display-1"&gt;{{ msg }}&lt;/h1&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
    &lt;v-btn color="pink" dark&gt;Click me&lt;/v-btn&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p>When I inspect the H1 in the console, I expect it to have a font family of 'Open Sans', sans-serif. Instead I see "Roboto", sans-serif. This was the default value of $body-font-family before it was overridden in my custom main.scss</p>
  
  <p>As I said, the other overrides from my main.scss are working fine. What am I doing wrong here?</p>