TIL: starting my own UI-library using Vue, Storybook & Sass

#todayilearned #webdev #frontend #javascript

I wanted to start my own Vue UI-library 🎨, to be used in different projects.

Scaffolding

I was trying around with vue-sfc-rollup, which is a tool to

"scaffold a minimal setup for compiling a Vue Single File Component (SFC) - or library of multiple SFCs - into a form ready to share via npm".

Following their setup docu, it worked without a problem, so I went with it.
Having the Vue CLI dev server in place, I could add some first basic components, and view them with that in the browser.

I wanted my vue components to use lang="scss" in the style block, which worked out of the box.

Using Storybook

My next step was to install Storybook to my project, because I did want to use that, instead of the Vue CLI dev server, suggested by vue-sfc-roll.

I followed the guide to install it to a Vue project and also found the helpful guide to extend the webpack configuration, to add the sass and style loaders.

Now running Storybook's server, the components themselves did appear in their stories, but completely without any styles applied just bare-naked browser defaults. 😿
Only when using no lang-attribute at all, they would appear styled.

I realized, that Storybook must be misconfigured somehow.

Webpack's shaking trees to hard

At one point (and dozens of Github/SO searches later 😅) I found a hint in Webpack's docu: Marking as side-effect-free.

As I didn't setup anything like that myself, I was quite surprised to find, that seemingly vue-sfc-rollup had set "sideEffects": false in the package.json.

Removing that property, or even better using:

"sideEffects": ["*.vue"],

would solve my problem! 🥳 The components were styled even in Storybook.

So apparently Storybook's webpack had pruned the Sass inside my .vue files, where the Vue CLI service dev server did not do that.

And yes, a quick search in Vue CLI's documentation would reveal this page, where they even have a yellow warning:

If you are developing a library or in a monorepo, please be aware that CSS imports are side effects. Make sure to remove "sideEffects": false in the package.json, otherwise CSS chunks will be dropped by webpack in production builds.

Great, now I am able to continue developing my very first Vue UI-library!