Rails can't find fonts when assets are added with Yarn

[luizkowalski]

I just added bootstrap to Rails using yarn
yarn add bootstrap

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

Locally works perfectly, but when deploying to Heroku, I can't see the assets

2017-11-28T20:14:52.861989+00:00 app[web.1]: I, [2017-11-28T20:14:52.861874 #4]  INFO -- : [6b764e01-ce48-46cb-977a-ccadd6eeb057] Started GET "/fonts/glyphicons-halflings-regular.ttf" for 95.91.247.235 at 2017-11-28 20:14:52 +0000
2017-11-28T20:14:52.862716+00:00 app[web.1]: F, [2017-11-28T20:14:52.862655 #4] FATAL -- : [6b764e01-ce48-46cb-977a-ccadd6eeb057]
2017-11-28T20:14:52.862778+00:00 app[web.1]: F, [2017-11-28T20:14:52.862721 #4] FATAL -- : [6b764e01-ce48-46cb-977a-ccadd6eeb057] ActionController::RoutingError (No route matches [GET] "/fonts/glyphicons-halflings-regular.ttf"):

I tried manually copy the fonts folder from bootstrap, tried add this:

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

nothing works, Rails doesn't see it

I'm using Rails 5.1.4 with MacOS High Sierra

[guilleiguaran]

I had exactly this problem today at work and was able to fix it in this way:

You can use bootstrap-sass instead and include this SCSS file to override fonts location using sass-rails' asset-url helper (that takes care of adding the files as dependencies during compile):

$bs-font-path: "bootstrap-sass/assets/fonts/bootstrap";

@font-face {
  font-family: 'Glyphicons Halflings';
  src: asset-url('#{$bs-font-path}/glyphicons-halflings-regular.eot');
  src: asset-url('#{$bs-font-path}/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  asset-url('#{$bs-font-path}/glyphicons-halflings-regular.woff2') format('woff2'),
  asset-url('#{$bs-font-path}/glyphicons-halflings-regular.woff') format('woff'),
  asset-url('#{$bs-font-path}/glyphicons-halflings-regular.ttf') format('truetype'),
  asset-url('#{$bs-font-path}/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

[luizkowalski]

I now that. Thing is I don't want to do any "workarounds", you know? I would like this to work out of the box or at least understand why it doesn't work and if there is any official way to fix if thats the case.

I think that since these fonts are already in the path, config.assets.precompile is aware of the directory and I said they should be compiled, this should be working.

they way I fixed was basically copy the fonts directory to public/fonts but I dont wanna do it everytime I update/install a new library

[guilleiguaran]

Assuming that node_modules is in asset paths already (e.g you have it in the default initializer), Sprockets should be able to compile files to public/assets adding this:

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

You can test this locally running bundle exec assets:precompile and checking if the font files are saved to the public/assets folder but even with the saved compiled correctly this won't fix your problem.

The problem that you're experiencing is that Sprockets compile digested assets to public/assets (e.g glyphicons-halflings-regular-fe185d11a49676890d47bb783312a0cda5a44c4039214094e7957b4c040ef11c.woff2) but bootstrap still referencing the undigested version of assets as you can see in the logs (e.g glyphicons-halflings-regular.woff2).

Sprockets don't do any processing/re-writing of asset URLs in CSS files so the URLs in CSS files aren't changed in any way. I'm not sure if we can do anything on Rails side to fix that.

[luizkowalski]

guess you are right...the problem is not actually Rails, but the url on the asset itself. I'll close it and evaluate your first solution, see if it fits

Thanks a lot!

[guilleiguaran]

A shorter alternative if you are using bootstrap-sass library, assuming that node_modules is already in your assets path, require bootstrap sass in this way (and the files in this order):

$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";

@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass/assets/stylesheets/bootstrap";

[luizkowalski]

I'm not using bootstrap-sass...I've installed from Yarn

[guilleiguaran]

Yup, I'm using Yarn too, Bootstrap team distribute bootstrap-sass in NPM registry also, so running yarn add bootstrap-sass is enough to add it to your project.

[luizkowalski]

nice to know!

[radiantshaw]

I'm on Rails 5.2.4 and adding the following line in config/initializers/assets.rb worked.

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf|otf)$/