CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3.1asset-pipeline
typeoneerror
typeoneerror

Reputation: 56958

Using the asset pipeline with file groups

In the Rails docs for the asset pipeline, it states:

The default behavior in Rails 3.1 and onward is to concatenate all files into one master file each for JS and CSS. However, you can separate files or groups of files if required (see below)

How exactly do you separate the files into groups as indicated? For example, if I've got an application that also has an admin area, I'd like to create three compiled files:

shared.css (both front- and back-end use this)
application.css (front-end only)
admin.css (back-end only)

The default combines all my files into application.css.

Upvotes: 4

Views: 1392

Answers (2)

Richard Hulse
Richard Hulse

Reputation: 10493

You will need to create a manifest for each area. For example:

admin.css:

/*
 *= require shared/nomalize
 *= require shared/960.css
 *= require admin/base
 *= require admin/tables
 */

shared.css:

/*
 *= require shared/nomalize
 *= require shared/960.css
 *= require public/base
 *= require public/branding
 */

You are free to make folders to hold shared, public and admin CSS and require these as required. You will have to remove require_tree directives from any manifests

Reference these in your layouts:

<%= stylesheet_link_tag "application" %>
<%= stylesheet_link_tag "admin" %>

and add the addittional manifests to the precompile array:

config.assets.precompile += ['admin.js', 'admin.css']

Upvotes: 5

typeoneerror
typeoneerror

Reputation: 56958

Apparently, my reading comprehension is quite lacking (tl;dr). It seems that when you use

stylesheet_link_tag 'application'

I looks to app/assets/stylesheets/application(css|sass) for a manifest file that defines which sheets to include.

So I can just use

stylesheet_link_tag 'admin'

In my back-end to look for that manifest. So here's how my assets structure ends up looking:

/app
  /assets
    /stylesheets
      admin.css
      application.css
      /admin
        screen.css
      /application
        screen.css
      /shared
        layout.sass
        reset.css
        typography.sass

admin.css and application.css are my manifests, and they look like this respectively:

/** admin.css
 *= require_self
 *= require shared/reset
 *= require shared/layout
 *= require shared/typography
 *= require admin/screen
*/

/** application.css
 *= require_self
 *= require shared/reset
 *= require shared/layout
 *= require shared/typography
 *= require application/screen
*/

You can see that each just references the shared sheets and then requires the context-specific sheet.

Upvotes: 3

Related Questions