title: How to use stylus block level import with Vuetify styles
body: <p>Using a stylus block level import:</p>
  
  <pre><code># vuetify-style.styl
  .myapp
     @import '~vuetify/src/stylus/main'
  </code></pre>
  
  <p>This is to ensure that the vuetify css doesn't interfere with elements from other parts of the page which aren't using vuetify.</p>
  
  <p>But unfortunately it doesn't work, I can't compile it.</p>
  
  <pre><code>ERROR  Failed to compile with 1 errors                                                                         2:13:28 pm
  
   error  in ./src/stylus/main.styl
  
  Module build failed (from ./node_modules/stylus-loader/index.js):
  Error: node_modules/vuetify/src/stylus/settings/_el
  evations.styl:85:33
     81|                       0px 9px 46px 8px $shadow-key-ambient-opacity
     82| 
     83| // MIXINS
     84| elevation($z, important = false)
     85|   box-shadow: $shadow-key-umbra[$z],
  ---------------------------------------^
     86|               $shadow-key-penumbra[$z],
     87|               $shadow-key-ambient[$z] (important ? !important : )
     88| 
  
  cannot perform $shadow-key-umbra[((0))]
  </code></pre>
  
  <p>It compiles only when I delete the first line (<code>.myapp</code>)</p>
  
  <p>Link to the issue on github: <a href="https://github.com/vuetifyjs/vuetify/issues/4864" rel="nofollow noreferrer">https://github.com/vuetifyjs/vuetify/issues/4864</a></p>
  
  <p>BTW I also tried to use <code>less</code> and import css from the package</p>
  
  <pre><code># vuetify-style.less
  vuetify-styles {
    @import (less) 'vuetify/dist/vuetify.css';
  }
  </code></pre>
  
  <p>But in this way I also got an error:</p>
  
  <pre><code> ERROR  Failed to compile with 1 errors                                            11:57:30 AM
  
   error  in ./src/plugins/vuetify-styles.less
  
  Module build failed:
  
  // load the styles
  var content = require("!!../../node_modules/css-loader/index.js??ref--9-1!../../node_modules/p
  ostcss-loader/lib/index.js??ref--9-2!../../node_modules/less-loader/dist/cjs.js??ref--9-3!./vu
  etify-styles.less");
            ^
  Unrecognised input
        in /Users/zvadym/WorkProjects/motos_as/odin/vue/src/plugins/vuetify-styles.less (line 4,
   column 12)
  
   @ ./src/plugins/vuetify-styles.less 4:14-334 13:3-17:5 14:22-342
   @ ./src/plugins/vuetify.js
   @ ./src/crm/main.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/crm/ma
  in.js
  </code></pre>