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

Question

我正在尝试通过 yarn 安装 FontAwesome，方法是 yarn add @fontawesome/fontawesome-free，然后将其添加到我的 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 中写入一些我通过互联网看到的内容，但是其中 none 有效，因为我收到以下错误：

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

您需要删除导入开始时的 ~ 标志，它应该可以正常工作。

应该是这样的：

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

希望对您有所帮助:)

Answer 2

Asim's 让我走上正轨。但是，对于 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 3

让 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 4

截至 2019 年 11 月，我发现这是实现所有功能的最简单方法：

通过 Yarn 安装：

yarn add @fortawesome/fontawesome-free

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

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

非常简单，对我有用！

此解决方案归功于我的同事 Ollie Cambridge！

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 header 链接保持如下：

<%= 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

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

Rails: Installing font-awesome in Rails 6.0.0-rc1 with webpacker and yarn

ruby

ruby-on-rails

webpack

yarnpkg