Question

我正在尝试通过yarn通过yarn add @fontawesome/fontawesome-free安装FontAwesome，然后将其添加到我的application.scss中：

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

我已经尝试通过互联网在application.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

非常感谢您的提前帮助！

Answer 1

我在以这种方式工作的 Rails 6 应用程序中安装了 Font-awesome ：

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

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';

注意：如果您想知道这些文件的位置，请检查应用程序中的node_modules/@fortawesome/fontawesome-free目录。

然后，在您的app/javascript/packs/application.js文件中要求Javascript文件：

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

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

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

仅此而已。

我希望这会有所帮助

Answer 2

您需要在导入开始时删除~符号，它应该可以正常工作。

应该是这样的：

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

希望它会有所帮助:)

Answer 3

截至2019年11月，我发现这是使所有功能正常运行的最简单方法：

通过纱线安装：

yarn add @fortawesome/fontawesome-free

导入您的application.js文件：

import "@fortawesome/fontawesome-free/css/all.css";

非常简单，为我工作！

此解决方案将贷给我的同事Ollie Cambridge?！

Answer 4

Asim's answer使我步入正轨。但是，似乎某些导入路径已针对FontAwesome的较新版本（5.8.2）进行了更改。我需要将以下内容放入application.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";

Answer 5

让Webpacker为您处理一切。将fontawesome.scss直接导入到您的application.js文件中。 Webpack将复制字体并正确引用它。

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

// app/javascript/src/font-awesome.js
import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
import '@fortawesome/fontawesome-free/scss/regular.scss';
import '@fortawesome/fontawesome-free/scss/solid.scss';

// app/javascript/packs/application.js
// Other imports left out for brevity
import '../src/font-awesome.js';

<!-- app/views/layouts/application.html.erb -->
<%= stylesheet_pack_tag "application" %>
<%= javascript_pack_tag "application" %>

使用webpacker和yarn在Rails 6.0.0-rc1中安装真棒字体

5 个答案: