My event CSS is currently located in
app/assets/stylesheets/pages/events.scssconfig.assets.precompile += %w( *.js ^[^_]*.css *.css.erb)The structure of my files:
/*
* This is a manifest file that'll be compiled into application.css, including all listed files below.
*
*= require bootstrap-wysihtml5
*= require rails_bootstrap_forms
*= require jquery.jcrop
*= require custom
*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "scaffolds";
Inside app/views/events/index.html.erb:
<% content_for :head do %>
<%= stylesheet_link_tag "pages/events", :media => "all" %>
<% end %>
Content of 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;
}
}
}
The challenge lies in debugging the issue specifically because it works flawlessly in development but not in production. It appears that none of the files in the subdirectory (app/assets/stylesheet/pages/*.scss) are functioning correctly in production. Any assistance or insights would be greatly appreciated. Thank you.