在 vue.js Web 组件目标中使用 Vuetify 版本的 material-icons答案

【问题标题】：use Vuetify's version of material-icons inside a vue.js web component target在 vue.js Web 组件目标中使用 Vuetify 版本的 material-icons
【发布时间】：2019-10-17 21:24:22
【问题描述】：

在 web 组件中包含 Vuetify 的 material-icons 样式的正确方法是什么，以便在没有任何父级外部链接的情况下在阴影中访问它（因为 web 组件没有 index.html）？

我的目标是这样的厕所：

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">

我也尝试过使用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 组件中工作，而不会在父组件中产生任何外部依赖。

【问题讨论】：

您是否尝试过从component.vue 内部导入它，例如：<style>@import "material-design-icons-iconfont/dist/material-design-icons.css"; </style>？
厌倦了它，但由于缺少依赖项而无法构建。说即使我安装了 css-loader 也不存在。
你必须告诉 webpack 使用 css loader webpack.js.org/loaders/css-loader

标签： vue.js web-component vuetify.js google-material-icons

【解决方案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 的默认材质图标添加到可以定位 wc 的 *.vue 文件的人。

【讨论】：

【解决方案2】：

我已经为此苦苦挣扎了几天，据我所知，通过 cdn 将图标导入 app.vue 文件会导致构建组件中出现竞争条件，这意味着字体是已加载但不生效。

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

同样，这可能不是最好的方法，但它仍然有效。

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

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

【讨论】：

【解决方案3】：

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

使用影子 DOM 时，我设法让图标字体 (@fontface) 在浏览器中可靠显示的唯一方法是在 HTML 文档的 <head> 中添加 <link rel="stylesheet" href="path/to/icon.css" type="text/css">。

每个影子 DOM/组件也需要导入相同的 css 文件。

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

【讨论】：

【解决方案4】：

最后，只需在 mycomponent.vue 文件的模板标签内的 cdn 中添加一个链接标签，它就可以工作了。

这是我能够让它在一个孩子身上工作到另一个厕所的唯一方法。所以我的 vue 构建的 wc 是作为一个 React 构建的 wc 的孩子运行的！框架不可知论！

【讨论】：