通过纱线安装引导程序的Rails无法找到字体 [英] Rails with bootstrap installed via yarn can't find fonts

问题描述

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

yarn add bootstrap

  bootstrap@ ^3.3.7：
版本3.3.7
已解决https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3 .7.tgz＃5a389394549f23330875a3b150656574f8a9eb71
  

on application.css

  * =需要bootstrap / dist / css / bootstrap 
  

on application.js

  // =需要bootstrap / dist / js / bootstrap 
 // = require rails-ujs 
 // =需要@ 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，但也没有成功

解决方案

字体的路径问题。
用于font-awesome的SCSS文件 node_modules / font-awesome / scss / _path.scss 有这样的内容：

  @ font-face {
 font-family：'FontAwesome'; 
 src：url（'＃{fa 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 fa-font-path} /fontawesome-webfont.eot?v =＃{$ fa-version}'）; 
 src：font-url（'＃{fa-font-path} /fontawesome-webfont.eot?#iefix&v =＃{$ fa-version}'）格式（'embedded-opentype'）， 
 font-url（'＃{fa-font-path} /fontawesome-webfont.woff2?v=# {$ fa-version}'）格式（'woff2'），
 font-url （'＃{fa-font-path} /fontawesome-webfont.woff?v=# {$ fa-version}'）format（'woff'），
 font-url（'＃{$ fa-字体路径} /fontawesome-webfont.ttf?v=# {$ fa-version}'）格式（'truetype'），
 font-url（'＃{fa-font-path} / fontawesome- webfont.svg？v =＃{$ fa-version} #fontawesomeregular'）format（'svg'）; 
 // src：url（'＃{fa-font-path} /FontAwesome.otf'）格式（'opentype'）; //开发字体时使用
 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）
  

I have a Rails 5 app with Bootstrap which I installed with yarn. I did the following:

yarn add bootstrap

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

on application.css

 *= require bootstrap/dist/css/bootstrap

on application.js

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

on 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?)$}

Still, when I access it on production (Heroku) I get

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

I tried add $icon-font-path: "node_modules/bootstrap/dist/fonts"; as well to my scss but that also didn't worked

解决方案

Problem with paths for fonts. SCSS file for font-awesome node_modules/font-awesome/scss/_path.scss has this:

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

But it should be font-url(..) instead of url(..) so font files are precompiled and stored in public/assets.

Override font paths in 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;
}

Run rake assets:precompile and you should see font files in public/assets/font-awesome/fonts with digested file names.

Compiled CSS should access font files from Rails assets:

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

这篇关于通过纱线安装引导程序的Rails无法找到字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！