【问题标题】:Heroicons not appearing in chrome for TailwindUI, but appears broken in Firefox英雄图标没有出现在 TailwindUI 的 chrome 中,但在 Firefox 中出现损坏
【发布时间】:2021-11-14 19:39:29
【问题描述】:

我购买并安装了 TailwindUI。我复制并粘贴了一个导航组件,只是为了看看它在应用程序中的外观,汉堡菜单和通知铃(都是 Heroicons 的一部分)没有出现。

当我单击菜单应下拉的部分时,它会起作用。但现在只有一个看起来像复选框的小方块。

这是它在 Firefox(移动调试器)中的样子:

在 Safari 上测试,它看起来像 Chrome。

在 node_modules 中,我可以看到英雄图标存在:

该应用使用 Elixir/Phoenix、Vue、Webpack 和 Tailwindcss。

任何人都知道问题是什么或我将如何调试它?

【问题讨论】:

    标签: vue.js webpack tailwind-css tailwind-ui


    【解决方案1】:

    如果您不使用 SVG 语法,则必须使用 npm/yarn 安装并导入 @heroicons/react 包到您的项目中

    npm install @heroicons/react
    

    【讨论】:

    • 感谢您的建议。我的 node_modules 中有 vue 安装的 heroicons。
    【解决方案2】:

    TailwindUI 支持 Vue 3,它似乎不包括 @vue/compat@vue/compat 是一种兼容性构建,适用于想要从 Vue 2 迁移到 Vue 3 时。compat 构建(又名迁移构建)应该与 Vue 3 兼容,但我想它对于 TailwindUI 来说仍然不够。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-12-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-09-28
      相关资源
      最近更新 更多