Rails bootstrap 通过纱线安装找不到字体

Question

我有一个 Rails 5 应用程序 Bootstrap 我用 yarn 安装了它。我做了以下事情：

yarn add bootstrap

bootstrap@^3.3.7:
  version "3.3.7"
  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"

于 application.css

 *= require bootstrap/dist/css/bootstrap

于 application.js

//= require bootstrap/dist/js/bootstrap
//= require rails-ujs
//= require @fnando/sparkline/dist/sparkline
//= require_tree .

在 assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules')
Rails.application.config.assets.paths << Rails.root.join('node_modules/bootstrap/dist/fonts')
Rails.application.config.assets.precompile << %r{node_modules/bootstrap/dist/fonts/[\w-]+\.(?:eot|svg|ttf|woff2?)$}

不过，当我在生产环境 (Heroku) 上访问它时，我得到了

ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

我也尝试将 $icon-font-path: "node_modules/bootstrap/dist/fonts"; 添加到我的 scss 中，但这也没有用

Answer 1

字体路径有问题。 font-awesome node_modules/font-awesome/scss/_path.scss 的 SCSS 文件有这个：

@font-face {
  font-family: 'FontAwesome';
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
 ...
}

但它应该是 font-url(..) 而不是 url(..) 所以字体文件被预编译并存储在 public/assets.

覆盖 application.scss 中的字体路径：

$fa-font-path:"font-awesome/fonts";

@import 'font-awesome/scss/font-awesome';

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
  font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
  font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
  font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
  font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  //  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

运行 rake assets:precompile 你应该会在 public/assets/font-awesome/fonts 中看到带有摘要文件名的字体文件。

已编译 CSS 应该从 Rails 资源访问字体文件：

@font-face{
   font-family:'FontAwesome';
   src:url(/assets/font-awesome/fonts/fontawesome-webfont-7bfcab6db99...979.eot?v=4.7.0)

Rails bootstrap 通过纱线安装找不到字体

Rails with bootstrap installed via yarn can't find fonts

ruby-on-rails

heroku

twitter-bootstrap

yarnpkg