Variables loaded, but not being applied

[thany]

Probably because this plugin simply loads the minified CSS bundle, which has no knowledge of Sass variables.

In addition to:

import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.min.css';

It should add a Sass file, let's call it withVuetify.scss:

@import '~vuetify/src/styles/main';

And import it a little something like that:

import './withVuetify.scss';

---

My solution

So when I realised this, I just "in-sourced" the whole plugin, because its really not that special to do so:

import Vue from 'vue';
import Vuetify from 'vuetify';

import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.min.css';
import './withVuetify.scss';

export default options => (Story, context) => {
  const vuetify = new Vuetify(options);
  const WrappedComponent = Story(context);

  return Vue.extend({
    vuetify,
    components: { WrappedComponent },
    template: `
      <v-app>
        <v-container fluid>
          <wrapped-component />
        </v-container>
      </v-app>
    `,
  });
};

Works exactly the same in preview.js:

import withVuetify from './withVuetify';
//...

export const decorators = [
  withVuetify(vuetifyOptions),
];

With this, styles now also work as intended.