I noticed that after generating a new Rails 4.2 application the order for the requires in application.css has been changed.
*= require_tree .
*= require_self
Shouldn't this be the other way around? Even in the Guides it isn't this way...
The change was made in order to allow styles defined in application.css to override previously included styles.
See Rails issue #11639 and this commit which changed the order of the require instructions.
As described in the official documentation here, and also explained in this SO answer here:
This puts the CSS contained within the file (if any) at the precise location of the require_self call.
This is slightly different than what I wrote in the comments since, as indicated by the above quote, the JS or CSS in the manifest will be inserted at the location of require_self. This becomes important if you have later assets that depend on something you wrote in the manifest.
Of course if you're doing that though, it would probably be better to place that "inline" asset in a separate file anyways, just to keep the manifest clean.
Related
I am using rails 3.2.12 and created a css file in assets/stylesheets/equipment.css to go along with a controller called equipment_controller.rb. This stylesheet isn't working. What do I need to do to get this included in the pipeline?
The file needs to be loaded into your application.css.
In your application.css file, you will either need to load the file manually (by adding require equipment to the manifest at the top of the file), or it will also be included if you have a require_tree line.
See http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives for more information.
Make sure you have the *= require_tree . in your application.css. It will be responsible to include all stylesheets from the current directory.
I cleared the contents and changed the extension from .css to .css.scss. And now it works.
jquery-ui-rails sounds really helpful as it figures out all the dependencies for the UI components you want and serves up the theme css/images. However, at the end of the Github page linked to above, it talks about the limitations where only the base theme is supported. Loading other themes is apparently "cumbersome, not officially supported by this gem, and adds 1 KB overhead as both the base theme and the custom theme are served up."
Can't I just edit the base theme/images this gem uses and replace it with my own theme from jqueryui.com's ThemeRoller?
You can use your custom theme.
For example:
- delete/comment from application.css this lines
*= require jquery.ui.core
*= require jquery.ui.theme
download theme from http://jqueryui.com/themeroller/
put css file in app/assets/stylesheets/ and you can customize styles
put images in app/assets/images/images/
This didn't work for me. After doing everything that Alexey mentioned, I had to add the following back into the application.css:
*= require jquery-ui.min.css
Obviously, I copied in the .min file into the assets/stylesheets folder from all of the files downloaded with the theme.
ME: Rails 4.2.7, Ruby 2.2
I'm working with a Rails 3 app, bootstrap-sass, and the asset pipeline, and I'm looking for some ideas on how to debug asset pipelines woes.
When working in development, and compiling on the fly (i.e. including from lots of compiled css files), my app looks exactly how I expect it to.
However when I use the asset pipeline to to compile assets into a single file, to test how it will behave in production, I think validation errors in the concatenated file application.css are causing browsers to stop evaluating the css correctly, and I'm seeing a number of display issues.
When I look at the generated css files in development, and pass them through a css3 validator, I can see that validation errors occur when working with the vendored css files (in most cases these are due to vendor specific hacks, setting off the validator) - the files I've generated are passing validation when I run them through the w3c validator, and I've listed the pass/fail results in the sprockets files below:
/*
* sprocket file in application.css
*
*= require_self
*= require vendor
*= require bootstrap-include # FAILS 474 ERRORS - presumably down to css hacks
*= require DT_bootstrap # FAILS TWO ERRORS - presumably down to css hacks again
*= require navbar # PASSES
*= require footer # PASSES
*= require main # PASSES
*= require home # PASSES
*= require widget # PASSES
*= require search # PASSES
*= require devise # PASSES
*= require doohickeys # PASSES
*= require datepicker # FAILS - again yet more cross browser css hacks suspected
*/
How should you start prepping files for production when concatenation breaks an app's visuals like this?
I'm asking on here to get an idea of how best to debug a compiled stylesheet like this - it sounds like something that has been solved before elegantly, but I'm not aware of a reliable, approach when dealing with a problem like this.
For example, I can see that some rules are not being evaluated by using web developer inspector tools in Firefox and Webkit, but it's not clear to me how to go beyond that, short of doing some laborious binary search on the compiled CSS.
Surely there are some more specialised tools available for situations like this already, like being able to compile only some files in application.css, and link to a precompiled bootstrap-sass file separately, or something similar?
You should not use Sprocket directives if you are using something like bootstrap-sass, you should use #import.
Rename your manifest file from application.css to application.css.scss, then #import away, example:
#import "frameworks";
#import "bootstrap-responsive";
So I've started building a gem, which is difficult, but it seems to be working out so far..
Except for one little thing, the assets. I've tried putting them in my lib/assets, app/assets and vendor/assets. But they don't seem to load.
I have a test-app which loads my gem to test it, but nothing seems to work. I have an engine in my gem which I'm sure is being loaded.
What more do I need to know for this to start working?
EDIT:
here is my engine (located in lib/baco/engine.rb):
require 'rails'
module Baco
class Engine < Rails::Engine
end
end
EDIT 2:
This is my css file (located in vendor/assets/stylesheets/application.css.scss):
/*
* 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 baco
*/
input {
padding:10px;
}
Turns out I still need to require the the css from the app that is loading the gem..
Is this a normal situation? Because I haven't read about that anywhere..
Anyways, got it to work, thanks for looking into it, hope this topic can helps some others out..
When using asset pipeline in rails 3.1, it creates a default application.js:
//= require jquery
//= require jquery_ujs
//= require_tree .
but when will I need include all of my javascript? In most cases we use different javascrips for different controllers/views?
require_tree . will result in you having a single file (application.js in this case) holding all your scripts that is there in the folder. And the fact that browsers will only pull that file once from your web server (unless you do a Ctrl + R refresh or there is a change in file cache property), does make the apps behave faster for subsequent requests.
Unless of course you have an application that have quite varying and huge scripts and a typical user is not expected to move around much that he wouldn't need majority of those. Which obviously is not very common case.
for additional and detailed information. look here
http://guides.rubyonrails.org/asset_pipeline.html
Browser loads application.js once and then gets it from cache.
//= require_tree . loads the every file or sub folder file within the javascript directory