title: Accessing $display-breakpoints.xs-only in sass file with vue-cli3 project and vuetify
body: <p>Looking for some direction on how to use $display-breakpoints.xxx in sass file.</p>
  
  <p>I used vue-cli-3 to setup project and then added vuetify with a la carte option and am not sure whether one should import file into my style sheet or not. Also not sure which file to import if it is needed.
  Error I get is <em>Expected Identifier</em> after <em>@media</em></p>
  
  <p>Documentation and various prior versions have me confused as to correct method.</p>
  
  <p>I have confirmed that sass is compiling my files and that are being inserted as expected (accept for issue described)
  What I have tried is</p>
  
  <pre><code>&lt;style lang="sass" scoped&gt;
  @import vuetify/src/styles/styles.sass
  .test
    color: green
    @media $display-breakpoints.xs-only
      color: red!important
  &lt;/style&gt;
  </code></pre>