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.
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 see that in development environment in rails 3.1 the css are loaded in alphabetic order and not in the order I want. I want a particular css file to be at the end so it over-writes any styles given to the class before. How can we achieve that?
You can actually do something like:
/*
*= require 'reset'
*= require_self
*= require_tree .
*/
in your application.css file. This allows you to specify any number of stylesheets, such as a reset, to come before the tree without having to specify each individual file. The single quotes around reset are optional.
Not trying to resurrect an old thread, just thought this might be helpful for some.
It is better to specify the order of each and every files manually:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require reset
*= require groups
*= require the_last
*
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.