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?

Prestissimo

Hmmm I believe you should put style that you need in a separate style-file, and then import that? Because afaik main.styl should be included in main.js – Nightcap

@Nightcap We can do that but we shouldn't. I've just omitted this intermediate files and used Vuetify's main.styl right away. Adding main.styl to the main.js will force webpack to include built CSS to the bundle but this won't add anything to the components' Stylus namespace. – Prestissimo

@Prestissimo Did you ever find the answer to this? – Strata

@Strata I think, this question won't have an answer: Vuetify's approach is to use CSS classes for styling your components -- the same as Bootstrap's one. So they recommend to style the .title this way: <h3 class="title display-3"> – Prestissimo

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.

Nightcap

Thank you for your answer! You've done the same what I did, but instead of configuring this once in the webpack's loader options, you somehow decided to include main.styl in every module. – Prestissimo