font awesome - FontAwesome Pro in Rails 8 with importmap and propshaft - Stack Overflow

admin管理员组

文章数量:1244222

I am having a difficult time getting FontAwesome Pro to work with propshaft, importmap and other Rails 8 changes.

I'm using tailwindcss 3 with an assets directory that looks like:

app
  assets
    builds
      tailwind.css
    stylesheets
      application.css
      application.tailwind.css

My application head looks like:

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title ActivityTracker
    %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
    = stylesheet_link_tag :app, "data-turbo-track": "reload"
    = javascript_importmap_tags

My first attempt to use the font-awesome-pro-sass gem provided by Font Awesome, seemed to have a conflict between the expectation of application.scss and application.css and I could not find the correct edits to make it work.

My current attempt adds the fontawesome directory directly to my app javascripts directory (e.g. app/javascript/fontawesome-pro-6.7.2-web ) and pins it in the importmap config (e.g. pin "@fortawesome/fontawesome-pro", to: "fontawesome-pro-6.7.2-web/js/all.js" )

It works in my local machine but is insanely slow and doesn't appear to work at all when I deploy it to a server (using kamal 2).

I am having a difficult time getting FontAwesome Pro to work with propshaft, importmap and other Rails 8 changes.

I'm using tailwindcss 3 with an assets directory that looks like:

app
  assets
    builds
      tailwind.css
    stylesheets
      application.css
      application.tailwind.css

My application head looks like:

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title ActivityTracker
    %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
    = stylesheet_link_tag :app, "data-turbo-track": "reload"
    = javascript_importmap_tags

My first attempt to use the font-awesome-pro-sass gem provided by Font Awesome, seemed to have a conflict between the expectation of application.scss and application.css and I could not find the correct edits to make it work.

My current attempt adds the fontawesome directory directly to my app javascripts directory (e.g. app/javascript/fontawesome-pro-6.7.2-web ) and pins it in the importmap config (e.g. pin "@fortawesome/fontawesome-pro", to: "fontawesome-pro-6.7.2-web/js/all.js" )

It works in my local machine but is insanely slow and doesn't appear to work at all when I deploy it to a server (using kamal 2).

• ruby-on-rails
• font-awesome
• ruby-on-rails-8

Share Improve this question Follow asked Feb 17 at 22:00 GSPGSP 3,78933 gold badges3333 silver badges5858 bronze badges 3

• Why are you loading SASS as javascript? Also in regards to this statement "seemed to have a conflict between the expectation of application.scss and application.css". The docs explain that: "If app/assets/stylesheets/application.css.scss does not exist then rename app/assets/stylesheets/application.css" – engineersmnky Commented 2 days ago
• Yes, thank you. After the rename, that file doesn't seem to be picked up by the asset pipeline anymore. Historically I would have added the sass gem to the project but I'm not sure that's the right solution for Rails 8 with propshaft? – GSP Commented yesterday
• Looking at the gem recommended for ruby on rails in font awesome, it appears to state that it's designed to work with sprockets and not propshaft thus you may be right that it's not the way to do it. Snippet from --> github/FortAwesome/font-awesome-sass 'font-awesome-sass' is a Sass-powered version of Font Awesome for your Ruby projects with specific support for Ruby on Rails and Sprockets. Have you found a solution? – Doreen Chemweno Commented yesterday

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I am having the same problem, for now I fixed the issue by adding a fixed library. I found this solution in a prior thread, but I'm not sure if it will works with the pro version.

Here: https://stackoverflow/a/78348023/20932911

<link rel="stylesheet" href="https://site-assets.fontawesome/releases/v6.5.2/css/all.css" />

本文标签： font awesomeFontAwesome Pro in Rails 8 with importmap and propshaftStack Overflow