title: How to use Vuetify's Stylus CSS classes as mixins?
body: <p>I want to use Vuetify's CSS classes as mixins. For that I'm using <code>@extends</code> Stylus directive. In <code>MyComponent.vue</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;style scoped lang="styl"&gt;
  .title {
    @extends .display-3;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>As you can see I don't put imports of Vuetify at every component's styles. To make this work I've configured webpack to load Vuetify's Stylus styles in every Stylus chunk of my app. In <code>webpack.config.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    /* ... */
    plugins: [
      /* ... */
      new webpack.LoaderOptionsPlugin({
        options: {
          stylus: {
            import: path.join(
              __dirname,
              'node_modules/vuetify/src/stylus/main.styl',
            ),
          },
        },
      }),
    ],
  };
  </code></pre>
  
  <p>But Vuetify's documentation <a href="https://vuetifyjs.com/en/style/theme#modifying-stylus-variables" rel="noreferrer">says clearly</a>:</p>
  
  <blockquote>
    <p>DO NOT import your main.styl inside of a component. This will cause performance issues and drastically slow down hot module reloading.</p>
  </blockquote>
  
  <p>It looks like I've broken this rule by configuring webpack this way. Applying every change at any component now takes approximately five seconds. I think that's because Vuetify is being rebuilt in every component.</p>
  
  <p>Is there a way to use Vuetify's Stylus styles as mixins without rebuilding Vuetify at every component? </p>