storybookjs/vue-cli-plugin-storybook

Document posibilities for webpack configuration

bodograumann opened this issue · 3 comments

bodograumann commented

By default vue-cli-plugin-storybook uses the vue-cli webpack config to generate a webpack config, which works fine.
Sometimes though, it is necessary to adjust this config for the storybook.
Please add some documentation on how to do that.
I know I did this before, but only from reading some hidden examples and it was a major struggle.

The particular case I am currently looking at, is using the storybook and tailwind vue-cli plugins side-by-side and modifying the path globs for purgecss during the storybook compilation to include all stories as well.
It would also be great to have some way of inspecting the generated webpack config, in order to check whether the modifications are applied correctly.

rdhainaut commented

Totally agree.
I try to config webpack with storybook from days now to ignore chunks name in console. (it takes at least 30 seconds to write all 100 react syntax highlighters plugins chunk name from doc addon.... one issue has been created for that on storybook github but the pain is there)

I have read the webpack doc and i find several options for that (one is devserver.stats = 'errors-only').
But impossible to make work with my actual config.
I use

// dependencies 
"vue": "^2.6.12",

// dev dependencies
"vue-cli-plugin-storybook": "^1.3.0",

"@storybook/addon-a11y": "^6.0.21",
"@storybook/addon-actions": "^6.0.21",
"@storybook/addon-backgrounds": "^6.0.21",
"@storybook/addon-centered": "^5.3.21",
"@storybook/addon-contexts": "^5.3.21",
"@storybook/addon-docs": "^6.0.21",
"@storybook/addon-knobs": "^6.0.21",
"@storybook/addon-links": "^6.0.21",
"@storybook/addon-viewport": "^6.0.21",
"@storybook/vue": "^6.0.21",

@bodograumann Can you share a sample of your vue.config.js to configure Webpack with this plugin
Thanks

pksunkara commented

Unfortunately, I haven't been using vue recently. But I am very open for any PRs. Just make one and I should be responding ASAP.

bodograumann commented

@rdhainaut Sorry, I cannot help you there. I solved my problem, by directly configuring the path globs in the postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    "vue-cli-plugin-tailwind/purgecss": {
      content: ["./public/**/*.html", "./src/**/*.@(vue|mdx)"],
    },
    autoprefixer: {},
  },
};