Make using automatically vite.config.js config optional.

[yodakaEngineer]

In v7, Storybook use vite.config.(ctm)js config automatically.

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-uses-vite-config-automatically

Vite builder uses Vite config automatically
When using a Vite-based framework, Storybook will automatically use your vite.config.(ctm)js config file starting in 7.0.
Some settings will be overridden by Storybook so that it can function properly, and the merged settings can be modified using viteFinal in .storybook/main.js (see the Storybook Vite configuration docs).
If you were using viteFinal in 6.5 to simply merge in your project's standard Vite config, you can now remove it.

I use ViteRuby for build application code and server for dev.
But I don't want to use it for storybook because its too much for storybook.
So I want to disable automatically using vite.config.js.

[IanVS]

Would it meet your needs to create another, simpler vite config file and point storybook at that?

[yodakaEngineer]

It sounds good!
But, I don't know how to force to read specified vite.config.js.
Could you show me?

[IanVS]

The setting is viteConfigPath, and you can see how to use it here: https://github.com/storybookjs/storybook/tree/next/code/lib/builder-vite#customize-vite-config

[yodakaEngineer]

It works!!!
And you made this option, right?
storybookjs/storybook#20681
It was very helpful! Thank you so much!!!

[4ndv]

For me vite-ruby caused storybook to try loading assets from port 3036 instead of 6006. Here's how I exclude it for storybook:

In .storybook/main.ts:

import { Plugin } from 'vite';

viteFinal: async (config) => {
  config.plugins = config.plugins?.flat()?.filter((p) => !~(p as Plugin).name.indexOf('vite-plugin-ruby'));

  return config;
},

[IanVS]

Thanks for sharing your solution. I plan to add an option to make it easier to filter out plugins that you don't want for Storybook. This is a good reminder that I should finally just build that. :)