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
*
Related
I have a Rails 4 app that uses the assets in app/assets/javascripts and app/assets/stylesheets throughout the application. However, I have made a nested resource for the admin portion of the app. I'd like for the admin interface to differ from what the end-user sees (different layout, different assets).
I tried changing the following in my application.css file:
*= require_tree .
to
*= require_directory
but the entire app still seems to be using the same resources. Could anyone please illuminate me on how to use different assets for different portions of a Rails 4 app?
The problem here is not how you're including files in your assets manifests, just that you're using the same manifest for the public and private/admin parts of your application.
You should create a new file called app/assets/stylesheets/admin.css and include within it the assets you require for your admin layout. Perhaps something like this:
*= require_tree ./admin
And then change your existing application.css not to use require_tree . but rather something more specific, such as this:
*= require_tree ./main
And move all of your public CSS files into that directory within your stylesheets directory.
Finally, you need to create a new layout for your admin pages, or modify the application layout such that the stylesheet and javascript includes are dynamic based on which part of the application you're using.
For simplicity you might want to just go with a new layout for the admin section, called app/views/layouts/admin.html.erb and then update any controllers for the application pages to use layout :admin.
I know the three combinations
*= require_tree . # for base asset directory
*= require_tree ./path # a specific path
*= require filename # some file
I am trying to solve a problem in my Rails 4 + Spree app and a post suggested me to convert my all.css file to all.scss (sass).
How do I convert
*= require spree/frontend
*= require_self
*= require_tree .
to #imports?
I did the
#import "spree/frontend";
Which was pretty straightforward, but now my app is "unstyled" and I am positive it is because of the other two directives.
Thanks!
'require_tree' will tell asset pipeline to include all the files within the specified directory. By default it is set to current directory with . (i,e dot). Refer to http://guides.rubyonrails.org/asset_pipeline.html for more details.
After changing the filename of application.css to application.scss, \*=require_tree . can be replaced with #import "/\*" (Example:- on a mac the statement would be translated to a path something like /Users/user_name/app_name/app/assets/stylesheets/*) . The * here imports all the files within the stylesheets directory. Refer to Is it possible to import a whole directory in sass using #import? for more information.
This should solve your problem.
But, the suggested way to go about this is to create another file with a .scss extension that contains all the imports you want and use \*=require_self and \*=require_tree . within the application.scss file.
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've seen several questions asking something similar, but I can't get this font to render in my production app using a computer that doesn't have the font installed.
http://fortawesome.github.com/Font-Awesome/
Installed this: https://github.com/bokmann/font-awesome-rails
Added this:
*= require 'font-awesome'
to application.css
The icons ARE working, e.g.:
<i class="icon-envelope"></i>
correctly renders an envelope icon that is actually one of the font-awesome fonts. However, I can't get the alphabetic font to display in production (I just see Times New Roman). I've tried these instructions to no avail:
http://blog.fieldforceapp.com/moving-to-heroku-bootstrap-font-awesome
I'm concerned there may be a conflict with other css in my stylesheets directory (in app/assets/stylesheets):
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* 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 select2
*= require bootstrap-timepicker
*= require 'font-awesome'
*= require_tree .
*= require zpp.css
*/
Do I need a separate fonts directory? I'm running rake assets:precompile and see the font .css files moving into my public directory, but still no go.
Would love some help on this b/c I've been scratching my head for too long now. Thank you!
I'd make sure the css file points correctly to the font files..
as for the "alphabetic font", font awesome doesnt have a separate font for alpha numeric characters so if your default font is times new roman, that is what you would see..
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.