在 nextJS 中向头部添加规范标签会使 FontAwesomeIcon 类不起作用

Question

我在添加 nextjs 时遇到了一个奇怪的错误

  <Head>
    <link rel="canonical" href="url"></link>
  </Head>

在我的 index.tsx 中，该页面中的一个元素无法正确呈现。我用

<FontAwesomeIcon icon={song.voted === true ? faHeart : fasHeart} className={`text-2xl color-text-red`} />

其中添加了那些标准类 svg-inline--fa fa-youtube fa-w-18 text-2xl color-text-red。

奇怪的是，当没有添加规范标签时，那些类可以正常工作

添加标签后，宽度和 svg-inline--fa 没有得到渲染（尝试刷新、重启服务器、prod en dev 环境）

这些是我的依赖项

"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"autoprefixer": "^10.2.3",
"file-loader": "^6.2.0",
"mysql": "^2.18.1",
"next": "latest",
"next-fonts": "^1.5.1",
"next-images": "^1.7.0",
"next-svgr": "0.0.2",
"next-transpile-modules": "^6.0.0",
"node-sass": "^5.0.0",
"postcss": "^8.2.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-rainbow-components": "^1.24.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"tailwindcss": "^2.0.2"

有没有人遇到过这个问题或对如何解决它有任何想法？

提前谢谢

Answer 1

对于 OP 来说可能为时已晚，但对于未来的人来说，这似乎应该回答这个问题。

添加到_app.js

import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;

来源： https://github.com/FortAwesome/react-fontawesome/issues/410#issuecomment-787468285

在 nextJS 中向头部添加规范标签会使 FontAwesomeIcon 类不起作用

adding canonical tag to head in nextJS makes FontAwesomeIcon classes not work

font-awesome

reactjs

next.js

在 nextJS 中向头部添加规范标签会使 FontAwesomeIcon 类 不起作用

adding canonical tag to head in nextJS makes FontAwesomeIcon classes not work

font-awesome

reactjs

next.js

在 nextJS 中向头部添加规范标签会使 FontAwesomeIcon 类不起作用