在 Web 组件中包含 Vuetify 的材料图标样式的正确方法是什么，以便可以在父组件中没有任何外部链接的情况下在阴影中访问它(因为 Web 组件没有索引.html)？
我的目标是这样的 wc：
vue-cli-service build --target wc --name my-element 'src/components/mycomponent.vue'
因此，所有 CSS 库/图标都需要存在于 mycomponent.vue 中。
我尝试在组件模板中添加指向材料图标的链接
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
我也尝试使用此页面上的各种说明
然而，当 Web 组件包含在外部页面中时，似乎没有任何工作。 您看到的只是图标名称的字母，而不是图标。
// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'md'
})
这不起作用，因为 Web 组件不包含 Vue 实例。(即在父 vue 应用程序中)。 我只是导出一个 .vue 组件。
我希望图标在 Web 组件内工作，而父组件中没有任何外部依赖项。
最后，只需在我的 mycomponent.vue 文件的模板标签内向 cdn 添加一个链接标签，它就可以工作了。
这是我能够让它在一个孩子到另一个wc中工作的唯一方法。 所以我的 vue 构建的 wc 作为一个孩子运行到 React 构建的 wc！框架不可知！
我使用 Vue CLI 来构建 Web 组件。 我做了一些关于如何添加 css 加载器的研究。 它希望它在 vue.config.js 中，就像这样......
module.exports = {
css: {
loaderOptions: {
css: {
import:true
}
}
}
}
无论如何，它在 npm 构建服务期间仍然会抛出错误。 所以，显然这种方法行不通。 对于 Vue Cli 项目，本身就没有 webpack。因此，遵循哪些说明非常令人困惑，Vuetify 似乎是问题所在。
鉴于 Vuetify 在这里的指示，https://vuetifyjs.com/en/framework/icons#component-icons 我不知道如何使用 vue.config.js css-loader 来实现这一点。
我需要知道如何将 Vuetify 的默认材料图标添加到可以针对 wc 的 *.vue 文件中的人。
我已经为此苦苦挣扎了几天，据我所知，通过 cdn 将图标导入 app.vue 文件会导致构建组件中出现竞争条件，这意味着字体已加载但不会生效。
到目前为止，我找到的唯一解决方案是确保无论您在哪里使用组件，您都引用那里的图标。
同样，可能不是最好的方法，但它仍然有效。
我确实认为目前在 vue 中制作的 wc 中对 Vuetify 的支持很差。还会出现许多其他样式问题，例如分页选择框出现在数据网格的随机位置。据我所知，这与 vuetify 使用的位置样式有关。很多元素使用 position：absolute 这在构建到原生 vue 应用程序时很好，但是针对 Web 组合会添加包装器div，这完全抛弃了这些元素。
我很矮，除非我是一个 wally，否则我认为目前在 wc 中对 vuetify 的支持很差，这是一种耻辱，因为我喜欢 vuetify，因为它将 ui/ux 抽象出来
没有使用 vue 我可能会给出错误的建议：
使用影子 DOM 时，我设法让图标字体 (@fontface) 在浏览器中可靠地显示的唯一方法是在 HTML 文档的<head>中添加<link rel="stylesheet" href="path/to/icon.css" type="text/css">。
每个影子 DOM/组件还需要导入相同的 css 文件。
不幸的是，它确实打破了独立组件的想法......