Rails asset pipeline not compiling fonts from 3rd party css framework

Question

The Problem

I'm using Semantic UI, the app renders icon fonts perfectly in development:

But don't work in production:

Error Details

In development, this file is available at: http://localhost:3000/assets/semantic-ui-css/themes/default/assets/fonts/icons.woff2

In production, I get these errors:

planetlauncher.herokuapp.com/:1 GET https://planetlauncher.herokuapp.com/assets/themes/default/assets/fonts/icons.woff planetlauncher.herokuapp.com/:1 GET https://planetlauncher.herokuapp.com/assets/themes/default/assets/fonts/icons.ttf 404 (Not Found)

Background

• Webpack was installed bundled with the rails new --webpack:react command.
• Semantic UI installed via yarn add semantic-ui-css
• Application.css includes:
  *= require 'semantic-ui-css/semantic.min.css
• assets.rb includes:
  Rails.application.config.assets.paths << Rails.root.join('node_modules') Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

Also, I cannot precompile assets and must fallback to the heroku assets pipeline because of my react web pack dependence.

Answer 1

I got around this by compiling the assets with webpack - you're already using webpack, so it shouldn't be a big deal.

Create a pack for the stylesheets:

/app/javascript/packs/stylesheets.js

import 'semantic-ui-css/semantic';

Then in your layout (/app/views/layouts/application.html.erb for example):

<%= stylesheet_pack_tag "stylesheets", :media => 'all' %>

Answer 2

Turns out this is a known issue. One of the comments explains this best:

css in node_modules will not work because it's referenced by for example url('asset.css') rather than asset-url('asset.css') (which would get the fingerprinted url)

-- Sam Peacy

I also posted this as an issue to rails/rails, and this doesn't seem to be something Rails is going to fix:

No plans to fix, neither workarounds. This problem also exists with any pure css libraries that don't use rails helpers and are not installed via yarn.

-- Rafael France

Answer 3

I think maybe you forgot compile your assets. So, your assets is not available in production enviroment.

$ RAILS_ENV=production bin/rails assets:precompile

http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

Hope it helps.