Reputation: 660
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.
Upvotes: 2
Views: 612
Reputation: 660
I solved the problem in this way:
The error message didn't appear anymore after this:
insted of adding this on assets.rb:
Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "components")
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:
download from the command line:
bower install bootstrap-sass-official --save
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";
Upvotes: 1