使用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通过互联网看到的内容中进行编写，但是都无法正常工作，因为出现以下错误：

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

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

它应该是这样的：

$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

Asim的 回答使我走上了正确的道路。但是，似乎某些导入路径已针对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 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';

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