title: How to override Vuetify variables with custom colors?
body: <p>I want to override vuetify variables with custom colors by following <a href="https://next.vuetifyjs.com/en/style/theme#stylus-guide" rel="nofollow noreferrer">this</a></p>
  <p>I've created a stylus folder which contains base folder (<code>_colors</code>, <code>_typography</code>) and <code>main.styl</code> file.  The <code>_color</code> file is imported into <code>main.styl</code> file, which the latter is imported into <code>main.js</code></p>
  <p>Here is my file structure:</p>
  <p><img src="https://i.stack.imgur.com/FYLuu.png" alt="" /></p>
  <p>And the imports are included in <code>main.js</code>:</p>
  <pre><code> import '../node_modules/vuetify/dist/vuetify.min.css'
   import './assets/stylus/main.styl'
  </code></pre>
  <p>Inside the <code>_color.styl</code>, I have this test code:</p>
  <pre><code>$red = {
    &quot;base&quot;:       #FF0000,
    &quot;darken-1&quot;:   #e50000,
    &quot;darken-2&quot;:   #990000,
    &quot;darken-3&quot;:   #7f0000,
    &quot;darken-4&quot;:   #000000,
  }
  </code></pre>
  <p>The custom colors aren't showing...am I missing something here?</p>