Rails assets are in a sub directory and cannot load in production

Question

Currently my event CSS is in app/assets/stylesheets/pages/events.scss and in development mode it looks fine and the assets are loaded. But on production, it looks like these pages are not loaded at all. I'm not sure how to fix this problem. I've looked at Rails 4: assets not loading in production but I am not familiar with the config.assets.precompile += %w( *.js ^[^_]*.css *.css.erb) since it seems like the path itself is not working in production.

app/assets/stylesheets/application.scss:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *


 *#= require bootstrap-wysihtml5
 *#= require rails_bootstrap_forms
 *#= require jquery.jcrop
 *= require custom
 *= require_self 
*/

@import "bootstrap-sprockets";
@import "bootstrap";
@import "scaffolds";

app/views/events/index.html.erb:

<% content_for :head do %>
  <%= stylesheet_link_tag "pages/events", :media => "all" %>
<% end %>

app/assets/stylesheets/pages/events.scss

@import "globals/helpers";
@import "vendors/animate";

.events-bar {
/*  a[class*="btn"] {
  height: 36px;
  display: inline-block;
}*/
#toggleBar {
  margin-top: 14px;
}
.btn-dashboard { 
   background-color: #fdf9ff;
   color: $eventsColour !important;  
   &:hover {
     background-color: $eventsColour-dark !important;
   }
 }
}

It's been hard to debug since it works fine in development and not in production. It looks like that all of the files in subdirectory (app/assets/stylesheet/pages/*.scss) are not working in production. Any insight will help, thanks.

could you share your Gemfile? – oreoluwa Jul 05 '16 at 06:56 — oreoluwa, Jul 05 '16 at 06:56

score 1 · Accepted Answer · answered Jul 05 '16 at 07:53

1

You just need to add events to your precompile assets list since its not compiled with application.scss the format you want is

config.assets.precompile += %w( pages/events.scss )

then

bundle exec rake assets:precompile

answered Jul 05 '16 at 07:53

Ropeney

1,065
8
10

This worked for me, but I had to use `config.assets.precompile += %w( pages/file.scss )` for all the scss files in the pages sub-directory. Is there a better way (would I be able to use a wildcard like: *.scss)? The purpose of the files in a sub-directory was to keep the code cleaner and only load for certain pages that are needed. Sorry, I'm new to this structure...I usually just have scss files under assets/stylesheets/ and thats it. – teresa Jul 07 '16 at 17:22
You can make a single file have a require structure list like application.scss does at the top, then only specify that one and it will include the rest. If you wanted everything in `pages/.` then you can have a single file in there with `//= require_tree .` – Ropeney Jul 11 '16 at 12:34

score 0 · Answer 2 · answered Jul 05 '16 at 07:06

0

In your application.scss, you should add:

*= require pages/events

run bundle exec rake assets:precompile

Let me know if it fixes the error or if it doesn't what error messages?

answered Jul 05 '16 at 07:06

oreoluwa

5,553
2
20
27

score 0 · Answer 3 · answered Aug 30 '19 at 12:51

I had same issue on Rails version - 5.2.3
Asset file located as-

app/assets/images/sub-folder

add all images were in sub-folder but was not loading on production whereas working fine on local.

image location in css-

url(./sub-folder/b2.jpg)

Here is what I did-

in /config/environments/production.rb set-

config.assets.compile = true

Initially it was false, I just pushed code on server and everything found working as desired!

hope will work for you too!!!

Rails assets are in a sub directory and cannot load in production

3 Answers3