Стили компонентов PrimeVue не включены в сборку Vite

Я использую Vite для создания веб-компонента Vue 3, включающего компоненты PrimeVue. Однако стили компонентов PrimeVue не включаются в конечный результат сборки. Компоненты отображаются без каких-либо стилей, хотя в режиме разработки все работает нормально.

Детали настройки:

vite.config.js:< /strong>

src/widget.ts:

src/bootstrap.ts

< strong>App.vue

Ожидаемое поведение:

Стили компонентов PrimeVue должны быть объединены и правильно применены в производственной сборке, так же, как они появляются в режиме разработки.

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]'
      },
    }
  }
})

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);

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
}
<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>
Виссарион
Вопрос задан17 мая 2024 г.

1 Ответ

Ваш ответ

Загрузить файл.