Code Monkey home page Code Monkey logo

Comments (11)

HLFH avatar HLFH commented on July 30, 2024 2

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

from propshaft.

SebouChu avatar SebouChu commented on July 30, 2024 1

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

from propshaft.

tenpaiyomi avatar tenpaiyomi commented on July 30, 2024 1

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.

from propshaft.

brenogazzola avatar brenogazzola commented on July 30, 2024

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?

from propshaft.

SebouChu avatar SebouChu commented on July 30, 2024

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");
}

from propshaft.

brenogazzola avatar brenogazzola commented on July 30, 2024

#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.

from propshaft.

kevynlebouille avatar kevynlebouille commented on July 30, 2024

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

from propshaft.

brenogazzola avatar brenogazzola commented on July 30, 2024

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

from propshaft.

stephannv avatar stephannv commented on July 30, 2024

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

from propshaft.

stephannv avatar stephannv commented on July 30, 2024

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

from propshaft.

HLFH avatar HLFH commented on July 30, 2024

@brenogazzola Works well. Thank you.

from propshaft.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    šŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. šŸ“ŠšŸ“ˆšŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ā¤ļø Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.