Vuetify 构建为 Web 组件样式未显示

Question

我正在使用 Vue 和带有 Web 组件的 Vuetify 构建应用程序；当我将 Vuetify 添加为 Web 组件时，CSS 样式 Vuetify 消失了。我尝试将<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css"> 添加到demo.html 文件中，但这没有帮助。我的仓库是vuetify as web component。 我有我的 vue.config.js transpileDependencies: [ 'vuetify' ] 但这也没有帮助。 我需要注意 Vuetify 样式不起作用。 我尝试了以下页面。

1. v-aoutocomplete not working with wc
2. Vuetify: external page CSS breaks Vuetify's component style
3. Custom Web Component image not showing

在我的 repo 中，您可以在 readme.MD 文件中看到步骤和复制以及我尝试过的选项。 我很高兴听到如何在 WC 中包含 vuetify 样式

Answer 1

有什么问题？

当vue-cli 正在构建一个网络组件时，它会忽略main.js 并使用entry-wc.js 代替，正如官方文档所说：When building a Webcomponent or Library, the entry point is not main.js, but an entry-wc.js file...。
默认vue-cli已经有这个入口文件，它使用src/App.vue作为入口组件，这意味着如果你将vuetify导入App.vue，所有vuetify的组件都不会在那里渲染，它们将被渲染一层下方（所有被导入App.vue 的组件）。

解决方案 1

从App.vue 中移除所有 vuetify 的组件并将它们移动到下一级。

<template>
  <HelloWorld/> <!-- v-app / v-main / v-btn go inside HelloWorld -->
</template>

<script>
import vuetify from '@/plugins/vuetify'
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  vuetify,
  components: {
    HelloWorld,
  },
};
</script>

<style> 
  @import 'https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css';
</style>

解决方案 2

将 vuetify 的组件留在 App.vue 中（移除 import vuetify... + <style> @Import...）。
创建一个“包装”组件（例如Wrap.vue），将 vuetify 及其样式导入此组件，然后导入 App.vue。 将新组件名称添加到 CLI 命令中：

...
"wcin": "vue-cli-service build --target wc --inline-vue --name my-element 'src/Wrap.vue'"
...