How to use Vuetify's Stylus CSS classes as mixins?

Question

I want to use Vuetify's CSS classes as mixins. For that I'm using @extends Stylus directive. In MyComponent.vue:

<style scoped lang="styl">
.title {
  @extends .display-3;
}
</style>

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 webpack.config.js:

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    new webpack.LoaderOptionsPlugin({
      options: {
        stylus: {
          import: path.join(
            __dirname,
            'node_modules/vuetify/src/stylus/main.styl',
          ),
        },
      },
    }),
  ],
};

But Vuetify's documentation says clearly:

DO NOT import your main.styl inside of a component. This will cause performance issues and drastically slow down hot module reloading.

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.

Is there a way to use Vuetify's Stylus styles as mixins without rebuilding Vuetify at every component?

Answer 1

NOTE: following should work, but for global styles, and not scoped styles.

---

Create you custom style file (e.g. styles/main.styl)

// main.styl 
@import "~vuetify/src/stylus/main.styl";

.my-class {
  @extend .display-3
  color: red;
}

And then where you initially imported vuetify style, replace that with path to your new custom style file.

// main.js (or vuetify.js or wherever you'd imported it)  
import '@/styles/main.styl'

Then you can use .my-class class in your components.