Rails：使用 webpacker 和 yarn 在 Rails 6.0.0-rc1 中安装 font-awesome

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

截至 2019 年 11 月，我发现这是最简单的方法：

通过 Yarn 安装：

yarn add @fortawesome/fontawesome-free

在您的application.js 文件中导入：

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

非常简单，为我工作！

感谢我的同事 Ollie Cambridge ? 这个解决方案！

Answer 2

Asim'sanswer 让我走上正轨。但是，对于较新版本（5.8.2）的 FontAwesome，某些导入路径似乎已更改。以下是我需要在我的 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 3

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

应该是这样的：

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

希望对你有帮助:)

Answer 4

让 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" %>

Answer 5

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

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

yarn add @fortawesome/fontawesome-free

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

rails webpacker:install

接下来，将 font-awesome 样式表导入您的 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 6

经过一个漫长的周末，我终于找到了答案：Font Awesome 找不到字体文件，因为文件名上添加了 Rails 资产摘要。

为了修复它，你需要覆盖字体。

神奇之处在于用于查找文件的 asset-url 助手。

yarn add @fortawesome/fontawesome-free

cat >> app/assets/stylesheets/application.scss << \HERE_DOC
// node_modules
@import '@fortawesome/fontawesome-free/css/all.css'
// plugins
@import 'plugins/font-awesome-font-face'
HERE_DOC

# copy @font-face definition from node_modules...all.css and replace url with asset-url
cat >> app/assets/stylesheets/plugins/font-awersome-font-face.css' << HERE_DOC
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: asset-url("@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot");
  src: asset-url("@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2") format("woff2"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff") format("woff"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf") format("truetype"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg#fontawesome") format("svg");
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: asset-url("@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot");
  src: asset-url("@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff") format("woff"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf") format("truetype"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg#fontawesome") format("svg");
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: asset-url("@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot");
  src: asset-url("@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff") format("woff"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf") format("truetype"), asset-url("@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}
HERE_DOC

来源：https://blog.trk.in.rs/2014/07/01/ruby-on-rails-layouts-and-rendering/#fontawesome