通过纱线安装bootstrap的Rails无法找到字体

我有一个带有Bootstrap的Rails 5应用程序，我安装了纱线。 我做了以下事情：

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的SCSS文件node_modules/font-awesome/scss/_path.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)