Missing Styles in Storybooks when used with Vue-CLI

[mbellary-chwy]

Describe the bug

Styles are missing in storybooks when used with Vue CLI. Some styles are loaded, others are not. Fonts are missing. No error messages though.

To Reproduce

Reproduction URL for the same is: https://github.com/MansoorBashaBellary/vue-cli-storybook

Expected behavior

Storybooks shouldn't break as in the screenshot below

Screenshots

Additional context

Prior to this issue, I was using @storybook/vue version of 4.0.0-alpha.20, while using this specific version of @storybook/vue, storybooks were working fine.

In the recent times, I have added changes to Deep theme stories nav panel. PR for the same is:

https://github.com/storybooks/storybook/pull/4702

Above deep theme changes got published to 4.1.0-alpha.x version. On upgrading the storybook dependencies to 4.1.0-alpha.8, I see styles of storybooks are broken.

Storybooks without Vue CLI is working fine. Reproduction URL for the same is: https://github.com/MansoorBashaBellary/react-storybooks

I see this issue is because of latest version of vue-cli-plugin-storybook. vue-cli-plugin-storybook uses @storybook/vue version of 4.0.0-alpha.20. Changing @storybook/vue version to the latest will break storybooks.

Could someone help fixing this issue. I wanted to use the changes of Deep theme with Vue CLI.

[mbellary-chwy]

Tried to figure out root cause of this issue, but was not able to find it. But got a work around to fix this issue with resolutions field in package.json like:

"resolutions": { "@storybook/components": "4.1.0-alpha.2", "@storybook/ui": "4.1.0-alpha.2" }

Adding above code in package.json fixed my issue

[pksunkara]

I have released 0.5.0. Can you try with that?

[backbone87]

does not work with 0.5

[mbellary-chwy]

Updating to latest 0.5.0 version is not working. On running storybooks I am getting below error:

ERROR command "serve:storybook" does not exist.

[backbone87]

the command is now called "storybook:serve" but it was maybe not added, you can try unisntall the plugin via npm then reinstall via "vue add storybook"

[mbellary-chwy]

Thank you @backbone87. Now it is working fine

[backbone87]

Also the styles? Because they are not working for me

Edit: Basically every style is missing that comes from theming

[backbone87]

Even explicitly setting theme option changes nothing:

import { withOptions } from '@storybook/addon-options';
import { themes } from '@storybook/components';
import { addDecorator, configure } from '@storybook/vue';
import '@/design/index.scss';
import Element from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
import Vue from 'vue';

Vue.use(Element, { locale });

const req = require.context('../../src/stories', true, /.stories.js$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

addDecorator(
  withOptions({
    name: 'My Storybook',
    theme: themes.normal,
  })
);

configure(loadStories, module)

React devtools show me the theme variables correctly injected into the component props.

[mbellary-chwy]

Styles are working fine for me. My package dependencies are:

"@storybook/addon-a11y": "4.1.1",
"@storybook/addon-knobs": "4.1.1",
"@storybook/addon-links": "4.1.1",
"@storybook/addon-options": "4.1.1",
"@storybook/addon-storyshots": "4.1.1",
"@storybook/addon-storysource": "4.1.1",
"@storybook/addon-viewport": "4.1.1",
"@storybook/addons": "4.1.1",
"@storybook/vue": "4.1.1",

And my config file is as yours

[backbone87]

ok, after adding a11y, storyshots, storysource and viewport its working, very strange. seems like there is some dependency hell goin on

[mbellary-chwy]

Yes. Thats true. Dependency hell is a lot in storybooks.

[backbone87]

hm, why close? does this work now out of the box?

edit: i mean with the deps of this plugin

[pksunkara]

@backbone87 do you think you can pinpoint why this is occuring?

[backbone87]

I think my problem was npm related