Styles are lost when building component

[deRaaf]

I created a web component from a wrapper component with several child components, when I import the component before building it has it's style complete:

But after building the style block is empty:

My setup is a s follows:

component.js

import {
  defineCustomElement as VueDefineCustomElement,
  h,
  createApp,
  getCurrentInstance
} from 'vue'
import { createWebComponent } from 'vue-web-component-wrapper'
import { createI18n } from 'vue-i18n'
import { config } from './helpers/i18n.helper'
import Component from './components/Component.vue'

const pluginsWrapper = {
  install(GivenVue) {
    const Vue = GivenVue
    const i18n = createI18n(config)
    Vue.use(i18n)
  }
}

createWebComponent({
  rootComponent: Component,
  elementName: 'custom-component'
  plugins: pluginsWrapper,
  VueDefineCustomElement,
  h,
  createApp,
  getCurrentInstance,
  disableStyleRemoval: true
})

App.vue

<script setup>
import './component';
</script>

<template>
    <custom-component></custom-component>
</template>

vite.config.js

export default defineConfig(() => {

  return {
  ...
    plugins: [
      vue({
        customElement: true
      }),
    ],
    build: {
      lib: {
        entry: './src/component.js',
        name: 'custom-component,
        fileName: 'custom-component'
      },
    },
  }
  ...
})

Let me know if you need additional info.

[EranGrin]

Hi There, I would suggest to check the vite demo project link

as I can see that you have a slightly different setup. If you need further help it would be better if you could provide a stackblitz demo of the issue Thanks

[deRaaf]

Hi,

I based my implementation on the demo, I only needed a different name for my output. Could the issue be that I use components from an extermal repository?

I could share a simplified setup but the external repo is private so I can't share my full implementation sadly.

[EranGrin]

I based my implementation on the demo, I only needed a different name for my output. Could the issue be that I use components from an extermal repository?

This unlikely to happen.

If you could share a simplified version which reproduces the issue, I would be happy to assist

[WulfP]

@deRaaf Just had a similar issue. Checked the vite demo project and found that it is working perfectly.

Then compared my config to the demo and saw that dev-packages were missing.

After adding postcss with postcss.config.js (hat to rename it to .cjs) and autoprefixer all style-blocks were working again as expected.

Hope this helps!

[EranGrin]

@WulfP hmm... you claim that the plugin must have the postcss.config file ?