在 vue.js 网络组件目标中使用 Vuetify 版本的 material-icons

Question

在 Web 组件中包含 Vuetify 的 material-icons 样式的正确方法是什么，以便可以在影子中访问它而无需在父级中使用任何外部 link（因为 Web 组件确实没有 index.html)?

我的目标是这样的厕所：

vue-cli-service build --target wc --name my-element 'src/components/mycomponent.vue'

所以，所有 css libraries/icons 都需要存在于 mycomponent.vue 中。

我试过向组件模板内的 material 图标添加 link

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">

我也尝试过使用关于此的各种说明page

然而，当 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 组件中工作，而父组件中没有任何外部依赖性。

Answer 1

我使用 Vue Cli 构建 Web 组件。我做了一些关于如何添加 css-loader 的研究。它希望它在 vue.config.js 中，像这样 ...

module.exports = {
css: {
loaderOptions: {
  css: {
    import:true
  }
}
}
}

不管怎样，npm build serve 还是会报错。所以，显然这种方法行不通。对于 Vue Cli 项目，本身没有 webpack。因此，遵循哪些说明非常混乱，Vuetify 似乎是问题所在。

根据此处 Vuetify 的说明，https://vuetifyjs.com/en/framework/icons#component-icons 我不知道如何使用 vue.config.js css-loader 来实现它。

我需要有人知道如何将 Vuetify 的默认 material 图标添加到可以作为 wc 目标的 *.vue 文件。

Answer 2

几天来我一直在努力解决这个问题，据我所知，通过 cdn 将图标导入 app.vue 文件会导致构建组件出现竞争条件，表示字体已加载但未生效。

到目前为止我找到的唯一解决方案是确保无论您在哪里使用组件，都可以引用那里的图标。

同样，这可能不是最好的方法，但效果较差 none。

我确实认为目前在 vue 中制作的 wc 中对 Vuetify 的支持很差。还有许多其他样式问题发生，例如分页 select 框出现在数据网格的随机位置。据我所知，这与 vuetify 使用的位置样式有关。许多元素使用 position:absolute 这在构建本机 vue 应用程序时很好，但是针对 web 组件会添加包装器 div，从而完全抛弃这些元素。

我很矮，除非我是个笨蛋，我认为目前 wc 中对 vuetify 的支持很差，这很遗憾，因为我喜欢 vuetify，因为它抽象了 ui/ux离开

Answer 3

没有用过vue的我可能会给出错误的建议：

当使用阴影 DOM 时，我设法让图标字体 (@fontface) 在浏览器中可靠显示的唯一方法是在 <head> HTML 文档。

每个阴影 DOM/component 还需要导入相同的 css 文件。

不幸的是，它确实打破了独立组件的想法...

Answer 4

我的 mycomponent.vue 文件的模板标签内的 cdn 中简单地添加了一个 link 标签，终于让它工作了。

这是我能够让它在 child 到另一个厕所中工作的唯一方法。所以我的 vue 构建的 wc 是运行作为 React 构建的 wc 的 child！框架无关！

在 vue.js 网络组件目标中使用 Vuetify 版本的 material-icons

use Vuetify's version of material-icons inside a vue.js web component target

web-component

vue.js

google-material-icons

vuetify.js