Clever Geek Handbook

Rails console won't compile fonts from 3rd party css framework

Problem

I am using Semantic UI, the app renders icon fonts fine in development:

The fonts are in development

But don't work in production: enter image description here

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 the following 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 team rails new --webpack:react

    .
  • Semantic user interface 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 am unable to precompile assets and have to fall back to the heroku asset pipeline due to my reaction to the webpack freeze.

+3


source to share


3 answers


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

Create a package for 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' %>
+3


source


I think you may have forgotten to compile your assets. Thus, your assets are not available in a production environment.

$ RAILS_ENV=production bin/rails assets:precompile


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

Hope it helps.

0


source


It turns out this is a known issue. One of the comments explains it best:

css in node_modules won't work because it is referenced by e.g. url ('asset.css') and not the url of the asset ('asset.css') (which will receive the fingerprint)

- Sam Pacey

I also posted this as an issue for rails / rails and it doesn't look like what Rails is going to fix:

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

.

- Raphael France

0


source






More articles:


All Articles