Importing libraries with fonts from node_modules (Bootstrap Icons example)

[SebouChu]

Hello!

I created a sample Rails 7 RC1 application with Propshaft and I wanted to use Bootstrap Icons from NPM package.

As you can see in the README of my sample app, I had to play a few tricks to make them work because the fonts import didn't work out-of-the-box.

I wanted some advice from multiple developers if there was a potential issue with Propshaft not handling the default font path correctly in bootstrap-icons and if there's not, if my workaround is good. I tried a few things and I don't know if it is the smartest solution.

This discussion may lead to write some documentation for best practices around Propshaft.

Thanks in advance for your help!

[brenogazzola]

Adding the node_modules folder like you did is correct. Propshaft adds some base folders but expects you to add other folders you need, like Sprockets did.

The second change, removing the fingerprint after “?” however is something we can try to improve. I’m not very familiar with bootstrap, so are you sure that just removing that part of the url is enough?

[SebouChu]

Looks like it. When I run rails assets:precompile:

• It adds the font files in the public/assets folder
• It adds the two entries in the public/assets/.manifest.json

  {
    "fonts/bootstrap-icons.woff2": "fonts/bootstrap-icons-00150349e6ebdaf2628af9ea4e56d6b02dbda393.woff2",
    "fonts/bootstrap-icons.woff": "fonts/bootstrap-icons-d644d61b4bc7925875ad953cc381b4a722b334d2.woff"
  }

Unfortunately, the fingerprint prevents the url() mapping in the compiled application-[digest].css. Below, the results of rails assets:precompile:

• Without the fingerprint (OK)

@font-face {
  font-family: "bootstrap-icons";
  src: url("/assets/fonts/bootstrap-icons-00150349e6ebdaf2628af9ea4e56d6b02dbda393.woff2") format("woff2"), url("/assets/fonts/bootstrap-icons-d644d61b4bc7925875ad953cc381b4a722b334d2.woff") format("woff");
}

• With the fingerprint (KO)

@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d") format("woff2"), url("./fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d") format("woff");
}

[SebouChu]

I just added Font Awesome to my sample app.

FA does not have fingerprints in the @font-face (source). So to make it work I just had to:

• Add the node_modules/@fortawesome/fontawesome-free folder in the load path
• Change the $fa-font-path variable from ../webfonts to ./webfonts

Pretty simple so something that could remove the ?fingerprint part could solve a few cases

[brenogazzola]

#50 should fix the fingerprint problem.

I'm not sure how to handle the path ../webfonts problem automatically though (or if it's even possible). By using @import the relative path shifts from assets/scss to assets and this is what causes ../webfonts to break. Maybe we need to add something to the README file.

[tenpaiyomi]

One thing I've noticed about Propshaft, at least in regards to Font Awesome, is that it seems to be failing on urls that have tags at the end. Using the above method by @SebouChu, I was able to get FontAwesome up and going though I still notice this little bit in my logs:

Unable to resolve './webfonts/fa-solid-900.eot?#iefix' for missing asset 'webfonts/fa-solid-900.eot?#iefix' in homepage.css
Unable to resolve './webfonts/fa-solid-900.svg#fontawesome' for missing asset 'webfonts/fa-solid-900.svg#fontawesome' in homepage.css
Unable to resolve './webfonts/fa-regular-400.eot?#iefix' for missing asset 'webfonts/fa-regular-400.eot?#iefix' in homepage.css
Unable to resolve './webfonts/fa-regular-400.svg#fontawesome' for missing asset 'webfonts/fa-regular-400.svg#fontawesome' in homepage.css
Unable to resolve './webfonts/fa-light-300.eot?#iefix' for missing asset 'webfonts/fa-light-300.eot?#iefix' in homepage.css
Unable to resolve './webfonts/fa-light-300.svg#fontawesome' for missing asset 'webfonts/fa-light-300.svg#fontawesome' in homepage.css
Unable to resolve './webfonts/fa-duotone-900.eot?#iefix' for missing asset 'webfonts/fa-duotone-900.eot?#iefix' in homepage.css
Unable to resolve './webfonts/fa-duotone-900.svg#fontawesome' for missing asset 'webfonts/fa-duotone-900.svg#fontawesome' in homepage.css

It seems like maybe propshaft is being a little too literal with asset paths.

[HLFH]

I can reproduce the issue of @tenpaiyomi.

Currently using the issue-47 branch from #50.
This is what I get in my error logs:

Unable to resolve 'fa-brands-400.svg#fontawesome' for missing asset 'fa-brands-400.svg#fontawesome' in page.css
Unable to resolve 'fa-regular-400.svg#fontawesome' for missing asset 'fa-regular-400.svg#fontawesome' in page.css
Unable to resolve 'fa-solid-900.svg#fontawesome' for missing asset 'fa-solid-900.svg#fontawesome' in page.css
Unable to resolve 'et-line.svg#et-line' for missing asset 'et-line.svg#et-line' in page.css
Unable to resolve 'et-line.svg#et-line' for missing asset 'et-line.svg#et-line' in page.css
Unable to resolve 'fa-brands-400.svg#fontawesome' for missing asset 'fa-brands-400.svg#fontawesome' in page.css
Unable to resolve 'fa-regular-400.svg#fontawesome' for missing asset 'fa-regular-400.svg#fontawesome' in page.css
Unable to resolve 'fa-solid-900.svg#fontawesome' for missing asset 'fa-solid-900.svg#fontawesome' in page.css
Unable to resolve 'et-line.svg#et-line' for missing asset 'et-line.svg#et-line' in page.css
Unable to resolve 'et-line.svg#et-line' for missing asset 'et-line.svg#et-line' in page.css

By using the main branch:

Unable to resolve 'fa-brands-400.eot?#iefix' for missing asset 'fa-brands-400.eot?#iefix' in page.css
Unable to resolve 'fa-brands-400.svg#fontawesome' for missing asset 'fa-brands-400.svg#fontawesome' in page.css
Unable to resolve 'fa-regular-400.eot?#iefix' for missing asset 'fa-regular-400.eot?#iefix' in page.css
Unable to resolve 'fa-regular-400.svg#fontawesome' for missing asset 'fa-regular-400.svg#fontawesome' in page.css
Unable to resolve 'fa-solid-900.eot?#iefix' for missing asset 'fa-solid-900.eot?#iefix' in page.css
Unable to resolve 'fa-solid-900.svg#fontawesome' for missing asset 'fa-solid-900.svg#fontawesome' in page.css
Unable to resolve 'et-line.eot?#iefix' for missing asset 'et-line.eot?#iefix' in page.css
Unable to resolve 'et-line.svg#et-line' for missing asset 'et-line.svg#et-line' in page.css
Unable to resolve 'et-line.eot?#iefix' for missing asset 'et-line.eot?#iefix' in page.css
Unable to resolve 'et-line.svg#et-line' for missing asset 'et-line.svg#et-line' in page.css
Unable to resolve 'themify.eot?-fvbane' for missing asset 'themify.eot?-fvbane' in page.css
Unable to resolve 'themify.eot?#iefix-fvbane' for missing asset 'themify.eot?#iefix-fvbane' in page.css
Unable to resolve 'themify.woff?-fvbane' for missing asset 'themify.woff?-fvbane' in page.css
Unable to resolve 'themify.ttf?-fvbane' for missing asset 'themify.ttf?-fvbane' in page.css
Unable to resolve 'themify.svg?-fvbane#themify' for missing asset 'themify.svg?-fvbane#themify' in page.css
Unable to resolve 'fa-brands-400.eot?#iefix' for missing asset 'fa-brands-400.eot?#iefix' in page.css
Unable to resolve 'fa-brands-400.svg#fontawesome' for missing asset 'fa-brands-400.svg#fontawesome' in page.css
Unable to resolve 'fa-regular-400.eot?#iefix' for missing asset 'fa-regular-400.eot?#iefix' in page.css
Unable to resolve 'fa-regular-400.svg#fontawesome' for missing asset 'fa-regular-400.svg#fontawesome' in page.css
Unable to resolve 'fa-solid-900.eot?#iefix' for missing asset 'fa-solid-900.eot?#iefix' in page.css
Unable to resolve 'fa-solid-900.svg#fontawesome' for missing asset 'fa-solid-900.svg#fontawesome' in page.css
Unable to resolve 'et-line.eot?#iefix' for missing asset 'et-line.eot?#iefix' in page.css
Unable to resolve 'et-line.svg#et-line' for missing asset 'et-line.svg#et-line' in page.css
Unable to resolve 'et-line.eot?#iefix' for missing asset 'et-line.eot?#iefix' in page.css
Unable to resolve 'et-line.svg#et-line' for missing asset 'et-line.svg#et-line' in page.css
Unable to resolve 'themify.eot?-fvbane' for missing asset 'themify.eot?-fvbane' in page.css
Unable to resolve 'themify.eot?#iefix-fvbane' for missing asset 'themify.eot?#iefix-fvbane' in page.css
Unable to resolve 'themify.woff?-fvbane' for missing asset 'themify.woff?-fvbane' in page.css
Unable to resolve 'themify.ttf?-fvbane' for missing asset 'themify.ttf?-fvbane' in page.css
Unable to resolve 'themify.svg?-fvbane#themify' for missing asset 'themify.svg?-fvbane#themify' in page.css

[kevynlebouille]

@brenogazzola could it be to handle # to ASSET_URL_PATTERN constant (ie: fa-solid-900.eot?#iefix)

[brenogazzola]

@kevynlebouille It already supported ?# after the file extension, but I've modified the regex to handle # by itself. Could you check again please?

[stephannv]

I'm still getting the problem using propshaft on main. I created an app to reproduce, just rails s, visit http://localhost:3000 and check out the console (rails console or browser console).
Using this application.sass.scss:

@import "@fortawesome/fontawesome-free/css/all";

I get these errors:

| ActionController::RoutingError (No route matches [GET] "/webfonts/fa-solid-900.woff2"):
| ActionController::RoutingError (No route matches [GET] "/webfonts/fa-regular-400.ttf"):

When I change the application.sass.scss to this:

$fa-font-path: "./webfonts";
@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/regular";

I get these errors:

Unable to resolve './webfonts/fa-solid-900.woff2' for missing asset 'webfonts/fa-solid-900.woff2' in application.css
Unable to resolve './webfonts/fa-solid-900.ttf' for missing asset 'webfonts/fa-solid-900.ttf' in application.css
Unable to resolve './webfonts/fa-regular-400.woff2' for missing asset 'webfonts/fa-regular-400.woff2' in application.css
Unable to resolve './webfonts/fa-regular-400.ttf' for missing asset 'webfonts/fa-regular-400.ttf' in application.css

[stephannv]

Oh forget about it. The Rails.root.join("node_modules", "@fortawesome", "fontawesome-free") was missing from config/initializers/assets.rb. Sorry.

[HLFH]

@brenogazzola Works well. Thank you.