title: Laravel mix compiling vuetify styles.sass to empty css file
body: <p>I'm trying to compile vuetify 2.0.0-beta.9 SASS using laravel mix. The output of the styles.sass is an empty css file. How can I fix this?</p>
  
  <p>As per the documentation (), First I ran:</p>
  
  <p><code>$ npm install sass sass-loader fibers deepmerge --dev</code></p>
  
  <p>Then created a <code>main.scss</code> file in <code>resources/sass</code>. Which contains the following:</p>
  
  <pre><code>@import '~vuetify/src/styles/main.sass';
  @import '~vuetify/src/styles/styles.sass';
  
  $body-font-family: 'Amiri', serif;
  </code></pre>
  
  <p>This produces a css file that seems incomplete because the styling of the site goes crazy while works fine if I just link a CDN or import a compiled one from <code>~vuetify/dist/vuetify.css</code></p>
  
  <p>I need to compile it myself rather than just importing from <code>~vuetify/dist/vuetify.css</code> because I want to change the <code>$body-font-family</code> variable.</p>
  
  <p>To test, I first commented the <code>styles.sass</code>,</p>
  
  <pre><code>@import '~vuetify/src/styles/main.sass';
  //@import '~vuetify/src/styles/styles.sass';
  
  //$body-font-family: 'Amiri', serif;
  </code></pre>
  
  <p>This confirmed that main.sass is being compiled. So next, I tried:</p>
  
  <pre><code>//@import '~vuetify/src/styles/main.sass';
  @import '~vuetify/src/styles/styles.sass';
  
  //$body-font-family: 'Amiri', serif;
  </code></pre>
  
  <p>Which output a file with only the following:</p>
  
  <pre><code>/** Ripples */
  
  /** Elements */
  
  </code></pre>