未显示验证生成为Web组件样式 [英] Vuetify build as Web component style not showing

问题描述

我正在使用Vue和Vutify构建一个带有Web组件的应用程序；当我将Vutify添加为Web组件时，CSS风格的Vutify已经消失了。我尝试将<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css">添加到demo.html文件中，但没有帮助。我的回购是vuetify as web component。 我的vue.config.jstranspileDependencies: [ 'vuetify' ]中有，但这也没有帮助。 我需要指出的是，Vutify风格不起作用。 我尝试了以下页面。

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中加入vutify风格

推荐答案

有什么问题？

当vue-cli构建Web组件时，它忽略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中，则不会在其中呈现vutify的所有组件，它们将呈现在1级以下(您正在导入到App.vue中的所有组件)。

解决方案1

从App.vue中删除vutify的所有组件，并将其下移一级。

<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

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

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

这篇关于未显示验证生成为Web组件样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！