How to Add Custom Folders to the Rails Asset Pipeline

florianfelsing

florianfelsing

Posted on September 23, 2022

How to Add Custom Folders to the Rails Asset Pipeline

Sometimes you may find yourself in the situation of wanting to add a custom folder to the Rails assets pipeline in order to keep your Rails application neatly organized.

Say, for example, you would like to have additional folders called "fonts" or "icons" for placing your custom fonts and icons there, keeping them out of the "images" folder.

This can be achieved very easily.

Go to config/assets.rb, where you will find the following line, which is telling you what to do:

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
Enter fullscreen mode Exit fullscreen mode

In order to register a custom folder within your application's assets folder, go ahead and add the following line:

Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")
Enter fullscreen mode Exit fullscreen mode

Rails.root returns a Pathname object, which is plain old Ruby and adds it to the assets paths of your application.

Now you can reference a downloaded font - say, for example in a stylesheet - like this:

@font-face {
  font-family: "Inter";
  src: url("Inter-Medium.woff2") format("woff2"),
       url("Inter-Medium.woff") format("woff"),
       url("Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
Enter fullscreen mode Exit fullscreen mode

Further reading: https://guides.rubyonrails.org/asset_pipeline.html

💖 💪 🙅 🚩
florianfelsing
florianfelsing

Posted on September 23, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related