Stylesheets in Rails App are incorrectly scoped

Question

I have my main application css and I want to exclude my backend stylesheets since the styles all bleed over when application.css executed *=require_tree .

I currently have my folders setup like so:

assets/   
   stylesheets/
       main/ #application.css ##other css files for front end
       backend/ #backend.css ##other css files for back end

My application.css is as follows:

/*
*= require_self
*= require foundation_and_overrides
*= require_tree ./main/
*/

backend.css

/*
 *= require_self
 *= require foundation_and_overrides
 *= require_tree ./backend/
 */

in my application.rb

config.assets.precompile += ['application.css', 'backend.css']

my development.rb

 config.cache_classes = false

  # Do not eager load code on boot.
  config.eager_load = false

  # Show full error reports and disable caching.
  config.consider_all_requests_local       = true
  config.action_controller.perform_caching = false

  # Don't care if the mailer can't send.
  config.action_mailer.raise_delivery_errors = false

  # Print deprecation notices to the Rails logger.
  config.active_support.deprecation = :log

  # Raise an error on page load if there are pending migrations
  config.active_record.migration_error = :page_load

  # Debug mode disables concatenation and preprocessing of assets.
  # This option may cause significant delays in view rendering with a large
  # number of complex assets.
  config.assets.debug = true

I tried moving the stylesheets around and playing with different directories, but I would either have the stylesheet not load at all or would receive "could not find foundation_and_overrides"...

Is there an easy clean way to do this? I just want to exclude a couple stylesheets from being compiled with application.css

Answer 1

The whole point of sprockets is that you include what you need. You can always add another stylesheet to the page as a whole. It's good practice to compile into one with users, but if backend is used by administrators, adding another stylesheet is totally fine.

First off, application.css is already precompiled, so you just need:

config.assets.precompile << 'backend.css'

Optionally include an additional stylesheet, so application.css has foundation, etc and backend.css has just additional styling:

<%= stylesheet_link_tag 'application', media: :all %> 
<% if admin? %>
   <%= stylesheet_link_tag 'backend', media: :all %> 
<% end %>

You can also add a shared directory for stylesheets that are for both if for some reason the application.css styles would conflict with the backend.css styles.

+ stylesheets
  + shared
  + app
  + backend
  - application.css
  - backend.css

And require_tree ./shared in both.