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.
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']
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.
Related
I have an application in rails 6 that requires bootstrap.
Bootstrap is being loaded at application.css
/*
*
*= require bootstrap
*= require jquery-ui
*= require font-awesome
*= require_tree
*= require_self
*/
I created a folder /stylsheets/admin where I keep my admin css. There, unless I import bootstrap again, its does not apply to the admin layout
admin_layout.scss:
#import "font-awesome";
#import "bootstrap";
#import "admin";
However that causes bootstrap to appear twice when the page loads. My question here is: what is the proper way to do this? I've solved it in a few ways but none of then feel 'right'.
Solution 1: I removed the 'require bootstrap' from application.css. Since the 'require_tree' loads all files and folders inside stylesheets/ bootstrap applies to application. If I add more layouts that will be an issue however.
Solution 2: (even worse) to move admin_layout.css outside of stylesheets/ so that 'require_tree' does not load it.
I've looked about and didnt find the 'proper way' to do it. What am I missing?
You can try using the stub directive after require_tree
/*
*
*= require bootstrap
*= require jquery-ui
*= require font-awesome
*= require_tree
*= require_self
*= stub admin_layout
*/
https://github.com/rails/sprockets#stub
Similar question has been answered already Asset Pipeline: excluding an admin.css file
I want to use a bootstrap-theme for my rails project, for example a theme from bootswatch: http://bootswatch.com/superhero/
Currently, bootstrap is integrated in my project via Bower:
Bowerfile:
asset 'bootstrap-sass-official'
Application.css
*= require 'bootstrap-sass-official'
The Documentation on Bootswatch says that to use a bootstrap theme, is to download the theme and to replace it with the existing bootstrap-file. Since I used bower to get bootstrap, there is no file to replace with.
What do I need to do, to use the Bootstrap-Theme?
EDIT:
I added superhero.css to stylesheets and added it to application.css:
*= require_tree .
*= require_self
*= require 'bootstrap-sass-official'
*= require 'superhero'
If your theme is having customised bootstrap then you can use bower. You need to download the bootstrap file from your theme and put in app/assests/stylesheets
and then call it in application.css
*= require 'bootstrap'
Is it possible to do this?
../application.css
*= require_tree .
*= require after_tree.css
All my .css files in the same directory.
I want to load after_tree.css to be able to rewrite the rules that was loaded in others .css by require_tree .
You have to require_self
/*
*= require_tree .
*= require_self
*/
*= require_self inserts the content of the file itself (after the directives). This is often useful when you want to make sure that JavaScript code from a manifest comes before any other code that is loaded with require_tree. We see an example of that in the default application.css.
You can't. You need to not use require_tree, but load them all individually if you want to control the order.
You could put all the files whose order you don't care about in a subdir, then require_tree ./subdir instead of require_tree. The require any files you do care about the order of after that.
To maintain the order you need to explicitly require like this:
*= bootstrap.css
*= override_bootstrap.css
*= my_style.css
*= require_tree .
I want to have a different set of stylesheets for the different parts of my Rails application. For example, I want to have a set of stylesheets for the landing page, a different set for the backend admin pages, and another set for the logged in account pages.
I've organized the stylesheets into folders with the names account, home, and admin, and I know how to specify in the application.css to just compile one folder.
*= require_self
*= require_tree ./account
*/
My question is, how do I specify that if the user is viewing the admin pages, or the home pages that the stylesheets in the admin or home folder should be the only style sheets that are referenced?
Thanks
There is no way to create conditonal stylesheet creation, because on production it is compiled on deployment.
You must create separate stylesheets, for example one would be default application.css:
/*
*= require_self
*= require some_stylesheet
*/
Then separate, admin.css
/*
*= require_self
*= require some_admin_stylesheet
*/
Then in production enviroment configuration extend line:
config.assets.precompile += ['application.css', 'admin.css']
Next, create separate layout/or create conditional inclusion of:
<%= stylesheet_link_tag "admin" %>
I know that all of these will be compiled together into one file but the order of this is very important for me when compiling the stylesheet as it determines whether the layout is completely messed up or not.
Also, how do I change the order for this?
assets/stylesheets/application.css
/*
*= require jquery-ui
*= require css-sprites
*= require formtastic
*= require style
*/
lib/stylesheets/lib.css
/*
*= require reset
*/
Is there a way I can load specifically the reset.css I have in my lib/assets/stylesheets folder before my application.css? or perhaps I could call it from within the file itself somehow? I've tried but I can't get it to work.
I personally have an application folder in every of these 3 folders where I put all the files I want included in every pages.
Then I have an application_vendor.css in vendor where I do require_tree ./application.
Same for lib, application_libs -> require_tree ./application
And then in your application.css that you include in the layout, you can do:
/*
*= require_self
*= require application_libs
*= require application_vendor
*= require_tree ./application
*= require other_stuff
*/
That way you can choose the order.