[Bug]: preview-head.html not picked up by Vite during build

[edikdeisling]

Describe the bug

To include some global styles for the components I use preview-head.html

<link href="/assets/index.pcss" rel="stylesheet" />

This works during the dev server, but during the build code from preview-head.html just copied to the final bundle without Vite transforms. And inside storybook-static/iframe.html I see the same link with .pcss extension.

To Reproduce

https://github.com/edikdeisling/issue-storybook-preview-head

1. pnpm i
2. pnpm storybook:dev
3. // text is red
4. pnpm storybook:build
5. pnpm serve-build
6. // text is not red

System

System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.12.0 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 118.0.5993.88
    Safari: 17.0
  npmPackages:
    @storybook/addon-essentials: 7.4.2 => 7.4.2 
    @storybook/manager-api: 7.4.2 => 7.4.2 
    @storybook/theming: 7.4.2 => 7.4.2 
    @storybook/vue3: 7.4.2 => 7.4.2 
    @storybook/vue3-vite: 7.4.2 => 7.4.2

Additional context

This bug duplicates already created one here
storybookjs/builder-vite#486

But I'm not sure that bug is alive, because it's in the repository for 6.x version

[edikdeisling]

Found a workaround for it. Just move the link to the .storybook/preview.ts.

import '../assets/index.pcss';

So I'm not sure should this bug be closed or not.

[shilman]

I'm not sure either. Thoughts @IanVS @integrayshaun ?