I’m using Vite to build a Vue 3 web component that includes PrimeVue components. However, the styles for the PrimeVue components are not being included in the final build output. The components render without any styling, even though everything works fine in development mode.

Setup Details:

• Vite Version: 5.0.5
• Vue Version: 3.4.31
• PrimeVue Version: 4.0.4
• PrimeIcons Version: 7.0.0
• Node Version: 20.11.0

vite.config.js:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {fileURLToPath, URL} from 'node:url'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  },
  build: {
    manifest: true,
    chunkSizeWarningLimit: 1000,
    cssCodeSplit: false,
    rollupOptions: {
      input: {
        widget: fileURLToPath(new URL('./src/widget.ts', import.meta.url)),
      },
      output: {
        format: 'iife',
        inlineDynamicImports: false,
        entryFileNames: '[name].js',
        chunkFileNames: '[name].js',
        assetFileNames: '[name].[ext]'
      },
    }
  }
})

src/widget.ts:

import type {App} from "vue";
import {bootstrap} from "./bootstrap.ts";

class MediaLibrary extends HTMLElement {
  private _mediaLibraryApp: App<Element>;

  constructor() {
    super();
    this.attachShadow({mode: 'open'});
  }

  async connectedCallback() {
    const attributes = {
      baseUrl: this.getAttribute('data-base-url'),
      csrf: this.getAttribute('data-csrf-token'),
      appLabel: this.getAttribute('data-app-label'),
      model: this.getAttribute('data-model'),
      objectId: this.getAttribute('data-object-id'),
      collections: JSON.parse(this.getAttribute('data-collections'))
    }

    this._mediaLibraryApp = bootstrap(this.shadowRoot, attributes);
  }

  disconnectedCallback() {
    if (this._mediaLibraryApp) {
      this._mediaLibraryApp.unmount();
    }
  }
}

customElements.define('media-library', MediaLibrary);

src/bootstrap.ts

import {createApp} from 'vue';
import App from './App.vue';
import {createPinia} from "pinia";
import PrimeVue from "primevue/config";
import Aura from "@primevue/themes/aura";
import ConfirmationService from "primevue/confirmationservice";
import ToastService from "primevue/toastservice";
import APIService from "./APIService.ts";
import mediaLibrary from "./plugin.ts";
import 'https://unpkg.com/@primevue/[email protected]/umd/aura.min.js'

export function bootstrap(target, attributes) {
  const app = createApp(App)
  app.use(createPinia());

  app.use(PrimeVue, {

  });
  app.use(ConfirmationService);
  app.use(ToastService);

  app.use(mediaLibrary, attributes)

  APIService.init(app);

  app.mount(target);
  return app
}

App.vue

<script setup lang="ts">

import MLContainer from "./components/Layout/MLContainer.vue";
</script>

<template>
  <link rel="stylesheet" href="http://localhost:5174/style.css">

  <MLContainer/>
</template>

<style>
</style>

Expected Behavior:

PrimeVue component styles should be bundled and applied correctly in the production build, just as they appear in development mode.