DEV Community

Discussion on: Using Storybook with Quasar

Collapse
 
marciodsousa profile image
Márcio de Sousa

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.

Collapse
 
yemolai profile image
Romulo G Rodrigues

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.js and it worked pretty well because I don't have a lot of things going on in SCSS domain of the application.

Collapse
 
daemswibowo profile image
Dimas Wibowo

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 ?

Thread Thread
 
hosseinghs profile image
Hossein Ghobadi Samani

I have the same issue, any updates?