I can't load bower/yarn dependencies on my rails projects

Question

I want to manage my fron-end with yarn or bower tools to download the packages directly from the github and I'm having some troubles to call the files from application.css or application.js.

So I created a simple rails project to examine the main problem carefully. I did the changes written in this short article (https://sheerdevelopment.com/posts/using-yarn-with-rails)

1. use the command to generate the yarn package.json file and components folder:

yarn add font-awesome --modules-folder ./vendor/assets/components/

2. add this line on assets.rb

Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "components")

3. change application.css to application.scss and add:

*= require font-awesome/scss/font-awesome

obs: I tried without this last modification too and with the path font-awesome/css/font-awesome that we have.

couldn't find file 'font-awesome/css/font-awesome' with type 'text/css' Checked in these paths:
/home/fillype/code/modusss/blog/app/assets/config
/home/fillype/code/modusss/blog/app/assets/images
/home/fillype/code/modusss/blog/app/assets/javascripts
/home/fillype/code/modusss/blog/app/assets/stylesheets
/usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts /usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actioncable-5.1.0.rc1/lib/assets/compiled /usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionview-5.1.0.rc1/lib/assets/compiled /usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts

Extracted source (around line #13):
11 * It is generally better to create a new file per style scope.
12 *
13 *= require font-awesome/scss/font-awesome
14 *= require_tree .
15 *= require_self
16 */

What I noticed is that the Rails is not looking for the assets inside the components' folder despite the fact that I specified this path on assets.rb file.

Answer 1

I solved the problem in this way:

The error message didn't appear anymore after this:

1. insted of adding this on assets.rb:

   Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "components")

2. I attached this line of code on application.rb:

.

module Blogapp
  class Application < Rails::Application
    config.load_defaults 5.1
    config.assets.paths << Rails.root.join("vendor", "assets", "bower")
  end
end

Now the page started to load but with some squares [] on the icons place. Then I knew that sass-rails gem has helpers to call the fonts so I changed the way the fonts was being called by the file bower/font-awesome/scss/_path.scss in this way:

before:

@font-face {
  font-family: 'FontAwesome';
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
//  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

after:

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
//  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

---

Obs:

The main problem was clearly the assets.rb that is not the right place to specify the assets paths.

After I successfully added the font-awesome like I explained, then I added bootstrap in a very simple way:

1. download from the command line:

   bower install bootstrap-sass-official --save

2. only adding this three lines of code on application.scss (we must have to rename from .css to .scss to work!) as it is told from bootstrap-sass github page (but not everything that it is prescribed).

   $icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";

   @import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";

   @import "bootstrap-sass/assets/stylesheets/bootstrap";