Ruby on rails Rails：在Rails 6.0.0-rc1中使用webpacker和Thread安装font awesome

我正在尝试通过

warn

安装FontAwesome，方法是执行

warn add@FontAwesome/FontAwesome free

，然后将其添加到我的

应用程序中。scss

：

$fa-font-path: '~@fortawesome/fontawesome-free-webfonts/webfonts';
@import '~@fortawesome/fontawesome-free-webfonts/scss/fontawesome';
@import '~@fortawesome/fontawesome-free-webfonts/scss/fa-solid';

我曾尝试在互联网上看到的

应用程序.scss

中编写一些东西，但都不起作用，因为我遇到以下错误：

Sass::SyntaxError in Pages#index
Showing /Users/foo/dev/project/app/views/layouts/application.html.erb where line #9 raised:

File to import not found or unreadable: ~@fortawesome/fontawesome-free-webfonts/scss/fontawesome.
Load paths:
  /Users/foo/dev/project/app/assets/images
  /Users/foo/dev/project/app/assets/javascripts
  /Users/foo/dev/project/app/assets/stylesheets
  /Users/foo/dev/project/vendor/bundle/ruby/2.5.0/gems/coffee-rails-5.0.0/lib/assets/javascripts
  /Users/foo/dev/project/vendor/bundle/ruby/2.5.0/gems/actioncable-6.0.0.rc1/app/assets/javascripts
  /Users/foo/dev/project/vendor/bundle/ruby/2.5.0/gems/activestorage-6.0.0.rc1/app/assets/javascripts
  /Users/foo/dev/project/vendor/bundle/ruby/2.5.0/gems/actionview-6.0.0.rc1/lib/assets/compiled
  /Users/foo/dev/project/node_modules

---

提前谢谢你的帮助

您需要在导入开始时删除

~

符号，它应该可以正常工作

应该是这样的：

$fa-font-path: '@fortawesome/fontawesome-free-webfonts/webfonts';
@import '@fortawesome/fontawesome-free-webfonts/scss/fontawesome';
@import '@fortawesome/fontawesome-free-webfonts/scss/fa-solid';

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

希望有帮助：）

让我走上正轨。但是，对于较新版本（5.8.2）的Fontsome，某些导入路径似乎已经更改。以下是我需要在

应用程序.scss

文件中添加的内容，以使FontAwesome 5.8.2可用于Rails 6.0.0-rc1应用程序：

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";

yarn add @fortawesome/fontawesome-free

---

让Webpacker为您处理一切。将

fontawesome.scss

直接导入到

application.js

文件中。 网页将复制字体并正确引用

$ yarn add --dev @fortawesome/fontawesome-free

---

截至2019年11月，我发现这是让一切正常运行的最简单方法：

通过纱线安装：

纱线添加@fortawesome/fontawesome免费

导入您的

application.js

文件：

$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

require("@fortawesome/fontawesome-free");

import“@fortawesome/fontawesome free/css/all.css”

非常直截了当，为我工作

这要归功于我的同事奥利·剑桥我在一个Rails 6应用程序中安装了Font-awesome，当时我正以这种方式工作：

首先，在应用程序中安装免费版本的font-awesome软件包：

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";

yarn add @fortawesome/fontawesome-free

然后，运行rails webpacker安装任何其他依赖项：

rails webpacker:install

接下来，将字体样式表导入您的
app/assets/stylesheets/application.scss
文件：

$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

require("@fortawesome/fontawesome-free");

注意：如果您想知道这些文件的位置是如何获得的，请检查应用程序中的
节点_modules/@fortawesome/fontawesome free
目录

然后，在
app/Javascript/packs/application.js
文件中需要Javascript文件：

$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

require("@fortawesome/fontawesome-free");

最后，确保
app/views/layouts/application.html.erb
文件中的样式表和javascript头链接保持如下状态：

$fa-font-path: '@fortawesome/fontawesome-free-webfonts/webfonts';
@import '@fortawesome/fontawesome-free-webfonts/scss/fontawesome';
@import '@fortawesome/fontawesome-free-webfonts/scss/fa-solid';

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>



就这些

我希望这有帮助
你能给我们看一下
纱线添加@fontawesome/fontawesome free的输出吗。我可以从这两个导入中省略
~
，并且一切仍然有效。从
$fa font path
声明中删除
~
会导致Webpack因模块解析错误而死亡。但是，从导入中省略
~
会导致RubyMine抱怨，并失去获取代码洞察和跳转到定义的能力。谢谢-rails 6-只有这一点有效，其他解决方案-没有运气；（对于拥有PRO帐户的用户，只需将
free
更改为
PRO
。就像：
import“@fortawesome/fontawesome-PRO/css/all.css”；