Question: Use with Vuetify and scss variables performance
richardmward opened this issue · 3 comments
Hi,
Using this plugin, I've managed to easily set up a storybook that uses my own components, which wrap around some Vuetify components. I use a styles/variables.scss
file in order to customise the general look and feel of Vuetify, but am finding that the performance is significantly worse when using yarn storybook:serve
than when using yarn serve
. For example, changing $border-radius-root: 8px !default;
to another number takes in the region of 10s when using yarn serve
, but takes around 40s when using yarn storybook:serve
. I'm aware that this it is expected that these changes can be slow - but I'd expect it to be equivalent to the a normal serve
.
I wonder if there is some webpack config that isn't equivalent?
preview.js
import { VApp, VContainer } from "vuetify/lib"
import { addDecorator } from "@storybook/vue"
import vuetify from "../../src/plugins/vuetify"
addDecorator(() => ({
vuetify,
components: {
VApp, VContainer
},
render() {
return (
<v-app>
<v-container fluid><story /></v-container>
</v-app>
)
}
}))
vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import '@fortawesome/fontawesome-free/css/all.css'
Vue.use(Vuetify);
export default new Vuetify({ ... });
I think I have just realised - my vuetify.js file has import Vuetify from 'vuetify/lib/framework';
, whereas in preview.js I am importing from import { VApp, VContainer } from "vuetify/lib"
.
Does it solves the issue?
Yes, the issue was having the import { VApp, VContainer } from "vuetify/lib"
in preview.js because it meant I lost the performance benefit of using import Vuetify from 'vuetify/lib/framework'
in vuetify.js (which is why it was faster when just doing yarn serve
).
To resolve it, I have put a layer of indirection inbetween the decorator and the Vuetify components, and now get sub 10s rebuilds when changing variables.scss
preview.js
import { addDecorator } from "@storybook/vue"
import StoryWrapper from "@/components/StoryWrapper.vue"
import vuetify from "@/plugins/vuetify"
addDecorator(() => ({
vuetify,
components: {
StoryWrapper
},
render() {
return (
<story-wrapper><story /></story-wrapper>
)
}
}))
StoryWrapper.vue
<template>
<v-app>
<v-container fluid>
<slot></slot>
</v-container>
</v-app>
</template>
<script>
export default {
name: "story-wrapper"
};
</script>