So, @romulo, first of all, thank you VERY much for this guide, it has been incredibly helpful!
I will add that adding storybook to your current project leads to a very substantial increase on your dependency tree, therefore big increases whenever installing node_modules (for local environment, or even during CI). To mitigate this we have configured install-subset (github.com/tabrindle/install-subset) on our project, so we can install Storybook and its dependencies only when necessary.
But I have to ask, didn't you run into other issues with Storybook and Quasar? After a lot of other problems making storybook recognise our Vuei18n and Vee-validate usage, we're now having trouble using SCSS global variables inside our Vue components.
The problem seems to be related to how storybook loads scss, which seems to be split across multiple files deep into quasar's sourcecode, which I haven't found yet.
About that install-subset I'll look forward into it, my modules dir is pretty big right now.
I haven't had any other significant issues with Storybook and Quasar, using Vue18n and other libs are really bad and I did a little mechanism to replicate Quasar behavior with boot/plugins files with an index.js to load every boot/plugin file available, that can be really helpful when the application grows. About the variables I imported the quasar.variables.scss in the .storybook/preview.js and it worked pretty well because I don't have a lot of things going on in SCSS domain of the application.
First, I built my quasar app using npm run build.
Then, I moved the css file from the dist directory to the .storybook directory and renamed it to styles.css.
Finally, I imported it into the preview.ts file using import './styles.css'.
Additionally, I wrote a bash script to automate this process and run it before executing npm run storybook.
{"scripts":{"storybook":"sh ./run.sh && storybook dev -p 6006",}}
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
So, @romulo, first of all, thank you VERY much for this guide, it has been incredibly helpful!
I will add that adding storybook to your current project leads to a very substantial increase on your dependency tree, therefore big increases whenever installing node_modules (for local environment, or even during CI). To mitigate this we have configured install-subset (github.com/tabrindle/install-subset) on our project, so we can install Storybook and its dependencies only when necessary.
But I have to ask, didn't you run into other issues with Storybook and Quasar? After a lot of other problems making storybook recognise our Vuei18n and Vee-validate usage, we're now having trouble using SCSS global variables inside our Vue components.
The problem seems to be related to how storybook loads scss, which seems to be split across multiple files deep into quasar's sourcecode, which I haven't found yet.
Oh, nice, I'm glad that my text helped :D
About that install-subset I'll look forward into it, my modules dir is pretty big right now.
I haven't had any other significant issues with Storybook and Quasar, using Vue18n and other libs are really bad and I did a little mechanism to replicate Quasar behavior with boot/plugins files with an index.js to load every boot/plugin file available, that can be really helpful when the application grows. About the variables I imported the quasar.variables.scss in the
.storybook/preview.jsand it worked pretty well because I don't have a lot of things going on in SCSS domain of the application.Hi thanks for the tutorial, it works perfectly!
But when im import quasar.variables.scss to preview.js it doesnt work :(
Can you help me ?
I have the same issue, any updates?
I followed this approach:
First, I built my quasar app using
npm run build.Then, I moved the css file from the
distdirectory to the.storybookdirectory and renamed it tostyles.css.Finally, I imported it into the
preview.tsfile usingimport './styles.css'.Additionally, I wrote a bash script to automate this process and run it before executing
npm run storybook.