On custom element 'link css' does not build css.

[wildwind123]

Hello

I write in template link css like this, for web component doc

<template>
  <link rel="stylesheet" href="/src/style.css" />
  <div class="red">
    <h1>red</h1>
  </div>
</template>

this work in dev mode, but does not work after build, css is empty

On documentation web component support external css via link
doc in mozilla

reproduction link

Steps to reproduce
npm install
npm run dev
red text is red

npm run build
npm run preview
red text is black, should be red

how can resolve this problem ?
this is bug, or not released feature ?

i create bug report on this
vitejs/vite-plugin-vue#375
if is it not bug i will delete it

[iamsnowyowl]

🛠 Ensure that the path you're using in the <link> tag is correct post-build. For many build tools, assets like CSS files might be placed in a /dist, /build, or /public folder, and their paths might be altered.

🛠 For Vite and similar tools, investigate how to configure the tool to ensure assets referenced in web components are correctly processed. Vite has features for handling static assets, but you might need to use specific plugins or configuration options to include assets referenced in this way.

🛠 Consider using Constructable Stylesheets in your web component.

🛠 Inline CSS as a Workaround

[wildwind123]

I fix it.
if you import style with ?url, css will build.

<template>
  <link rel="stylesheet" :href="url" />
  <div class="red">
    <h1>red</h1>
  </div>
</template>
<script lang="ts" setup>
import url from "./style.css?url"
</script>