Closed richardmward closed 4 years ago
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>
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 usingyarn storybook:serve
than when usingyarn serve
. For example, changing$border-radius-root: 8px !default;
to another number takes in the region of 10s when usingyarn serve
, but takes around 40s when usingyarn 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 normalserve
.I wonder if there is some webpack config that isn't equivalent?
preview.js
vuetify.js