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.

I can see what's happening here, have the same thing myself - any files referenced by 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). Did you figure out a way around this? — Sam Peacey
– Sam Peacey, Commented Aug 7, 2017 at 6:17
@SamPeacey you're right. I forgot to update this question with the new information I got. On it — Amin Shah Gilani
– Amin Shah Gilani, Commented Aug 7, 2017 at 19:48
Thanks for the update! To resolve this myself I ended up just compiling them via webpacker rather than using the asset pipeline — Sam Peacey
– Sam Peacey, Commented Aug 7, 2017 at 23:26
@SamPeacey that sounds awesome! Could you submit your solution as an answer to this question? I'll accept yours, and it'll help a lot of future people out. — Amin Shah Gilani
– Amin Shah Gilani, Commented Aug 8, 2017 at 15:29

Sam Peacey · Accepted Answer · 2017-08-09 01:32:57Z

3

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' %>

answered Aug 9, 2017 at 1:32

Sam Peacey

6,0341 gold badge28 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

markhops Over a year ago

Just tried this and getting this error: Webpacker can't find stylesheets.css in /Users/my_user/Workspace/my_app/public/packs/manifest.json

Sam Peacey Over a year ago

@markhops, I'm not sure what your setup is, but these files should be in app/javascript/packs, I personally don't have a packs folder in /public, the manifest.json is a sprockets file that would normally live in app/assets, and not something to do with webpack. As far as I am aware. Something sounds a little bit wonky with your setup.

hoangdd · Accepted Answer · 2017-06-23 04:19:07Z

0

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.

answered Jun 23, 2017 at 4:19

hoangdd

5092 silver badges14 bronze badges

1 Comment

Amin Shah Gilani Over a year ago

While this would usually work, it doesn't in my case. I need the Heroku pipeline to do my deploying for me because of my webpack react app.

Amin Shah Gilani · Accepted Answer · 2017-08-07 19:53:50Z

0

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

answered Aug 7, 2017 at 19:53

Amin Shah Gilani

10k7 gold badges45 silver badges87 bronze badges

Collectives™ on Stack Overflow

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

The Problem

Error Details

Background

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The Problem

Error Details

Background

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related