我遇到了一个问题。在我的Rails 7应用程序中，我尝试使用Font-Awesome图标。我安装了this npm包，然后添加了：

import "@fortawesome/fontawesome-free"

到我的app.ts.之后，我检查了页面，我把这个图标：

<i class="fa-solid fa-caret-down"></i>

但是图标没有出现。进入检查器模式，我可以看到图标的高度和宽度为0：0，所以安装一定有问题，也许我遗漏了一些东西。我已经尝试过安装Font-Awesome gem，而不是NPM，但是这给了我ESBuild的各种错误，比如无法编译. svg文件和一些其他扩展。我在安装中遗漏了什么？

更新

在安装gem font-awesome-sass并运行bundle install之后，我在我的app. scss中添加了这样的import语句：

@import "bootstrap/scss/bootstrap";
@import "font-awesome";

不幸的是，这会导致以下错误输出：

✘ [ERROR] [plugin sass-plugin] Can't find stylesheet to import.
  ╷
9 │ @import "font-awesome";
  │         ^^^^^^^^^^^^^^
  ╵
  - 9:9  root stylesheet

/app/node_modules/esbuild/lib/main.js:1596
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
error: Can't find stylesheet to import.
  ╷
9 │ @import "font-awesome";
  │         ^^^^^^^^^^^^^^
  ╵
  - 9:9  root stylesheet
    at failureErrorWithLog (/app/node_modules/esbuild/lib/main.js:1596:15)
    at /app/node_modules/esbuild/lib/main.js:1052:28
    at runOnEndCallbacks (/app/node_modules/esbuild/lib/main.js:1468:61)
    at buildResponseToResult (/app/node_modules/esbuild/lib/main.js:1050:7)
    at /app/node_modules/esbuild/lib/main.js:1162:14
    at responseCallbacks.<computed> (/app/node_modules/esbuild/lib/main.js:697:9)
    at handleIncomingPacket (/app/node_modules/esbuild/lib/main.js:752:9)
    at Socket.readFromStdout (/app/node_modules/esbuild/lib/main.js:673:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: null,
      notes: [],
      pluginName: 'sass-plugin',
      text: "Can't find stylesheet to import.\n" +
        '\x1B[34m  ╷\x1B[0m\n' +
        '\x1B[34m9 │\x1B[0m @import \x1B[31m"font-awesome"\x1B[0m;\n' +
        '\x1B[34m  │\x1B[0m \x1B[31m        ^^^^^^^^^^^^^^\x1B[0m\n' +
        '\x1B[34m  ╵\x1B[0m\n' +
        '  - 9:9  root stylesheet'
    }
  ],
  warnings: []
}