Vuetify colors are not shown after vue-cli build

Question

I'm trying to build the default Vuetify example (HelloWorld.vue and App.vue) into a WebComponent that I can then insert into a simple HTML page.

HelloWorld.vue:

import {
    VCol,
    VContainer,
    VRow,
    VImg
  } from "vuetify/lib"

  export default {
    name: 'HelloWorld',
    components: {
      VCol,
      VContainer,
      VRow,
      VImg
    },
..... 

App.vue:

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
....

import Vuetify from "vuetify/lib";
import Vue from 'vue'
import HelloWorld from './components/HelloWorld';

Vue.use(Vuetify)
var vuetify = new Vuetify({

});

import {
  VApp,
  VMain,
  VAppBar,
  VIcon,
  VSpacer,
  VBtn,
  VImg
} from "vuetify/lib"

export default {
  name: 'App',
  vuetify,
  components: {
    HelloWorld,
    VApp,
    VMain,
    VAppBar,
    VIcon,
    VSpacer,
    VBtn,
    VImg
  },


.........
@import "../node_modules/vuetify/dist/vuetify.min.css"

To build the component, I use vue-cli-service build --target wc --name test-build ./src/App.vue which creates the component in the dist folder.

When I use this new WebComponent in an HTML page, the color of the top bar becomes black and not primary (see images).

[enter image description here](https://i.stack.imgur.com/zYmIr.png)

I imported the Vuetify CSS in the App.vue: @import "../node_modules/vuetify/dist/vuetify.min.css" but it didn't work.