So, I may be completely wrong here, but I am trying to organize my css files so that scss files are loaded up first, with some css files being loaded up later.
Here is my application.scss
// Core
#import "core/reset.scss";
#import "core/constants.scss";
#import "core/mixins.scss";
#import "core/helpers.scss";
// Template
#import "template/main_navigation.scss";
#import "template/header.scss";
#import "template/footer.scss";
#import "template/template.scss";
// Components
#import "components/scorecard.scss";
#import "components/support.scss";
#import "components/event_report.scss";
#import "components/select2-small.scss";
#import "components/progress_bar.scss";
#import "components/carousel.scss";
#import "components/collapsible.scss";
#import "components/forms.scss";
#import "components/form_validations.scss";
#import "components/jquery_ui_customized.scss";
#import "components/screen.scss";
// Overrides
#import "components/jquery_ui_overrides.scss";
#import "components/chosen_overrides.scss";
#import "components/multiselect_override.scss";
#import "components/qtip_overrides.scss";
// Gem load
#import "font-awesome";
I also have a vendor.css file which has:
/*
*= require_tree ./vendor <- points to a subfolder with a bunch of css files
*/
In my application.html.erb I have:
<%= stylesheet_link_tag "application", media: "all" %>
<%= stylesheet_link_tag "vendor", media: "all" %>
However, when I view source in development, I see that application.css loads up fine, followed by all the assets in the vendor folder, followed by an empty vendor.css manifest file
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/chosen.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/colorPicker.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/confirm.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/demo_table.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/fancybox.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/forms.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/jquery-ui-numeric-min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/jquery-ui-numeric.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/jquery-ui.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/jquery.checkboxtree.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/jquery.checkboxtree.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/jquery.chosen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/jquery.multiselect.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/jquery.qtip.nightly.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/jquery.qtip.nightly.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/jquery_ui_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/scaffold.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/select2-small.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/select2-small.css.map?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/select2.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/select2.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor/strength.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vendor.css?body=1" media="all" rel="stylesheet" type="text/css" />
Why aren't these files loading in the vendor.css manifest file, and am I completely wrong in my approach here?
Thanks
In the development environment Rails will load the individual files for you, for easier debugging.
To turn this off, set config.assets.debug to false in your development environment file i.e. config/environments/development.rb and restart your Rails app.
The reason you have an empty vendor.css file showing up is because you haven't put anything in it (other than the comment to include the files in the vendor folder). This is expected Rails behavior -- any .css or .scss file can contain both comments that direct the asset pipeline to include other files as well as CSS or SCSS code. If a file contains only directives then (in development mode) you'll see an empty file. In production this won't matter since you'll precompile all your assets and end up with a single .css file included in the HTML.
Related
Should I use
<link href="#Url.Content("~/Styles/style.css")" rel="stylesheet" />
or
<link href="#Href("~/Styles/style.css")" rel="stylesheet" />
or
<link href="~/Styles/style.css" rel="stylesheet" />
for referencing StyleSheets, JavaScripts and images?
Is there any difference between above three?
I am trying to create a rails app and I have couple of css and js files to be added to rails app pipeline. These are;
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/codrops-stepsform/css/component.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootsclertrap-datepicker/css/datepicker3.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/summernote/css/summernote.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/codrops-dialogFx/dialog.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/codrops-dialogFx/dialog-sandra.css" rel="stylesheet" type="text/css" media="screen" />
<link href="pages/css/pages-icons.css" rel="stylesheet" type="text/css">
<link class="main-stylesheet" href="pages/css/themes/simple.css" rel="stylesheet" type="text/css" />
<link class="main-stylesheet" href="assets/css/style.css" rel="stylesheet" type="text/css" />
as in the theme I am trying to use. But if I only separate these css js and image, the problem is some of the css files are using img files inside their directory.For instance, select2.css uses background: url('select2.png') right top no-repeat; Or bootstrap min (I know I can add gem for this) uses url path to src:url(../fonts/glyphicons-halflings-regular.eot). So should I go over css and js files and search for their dependents?
I am so stuck in to designing this in a rails way. Thank you
After deploying my rails app to heroku, there are no dropdown menus!
When running locally, my source looks like this :
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/admins.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/associates.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/dasharea.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/database.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/members.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/sessions.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/vendor/custom.modernizr.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="anbyACcBlOI2Zpa9E2TImosNiBYN5KFTC8heYI1TE+I=" name="csrf-token" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/jquery.ui.widget.js?body=1"></script>
<script src="/assets/jquery.ui.accordion.js?body=1"></script>
<script src="/assets/jquery.ui.position.js?body=1"></script>
<script src="/assets/jquery.ui.menu.js?body=1"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1"></script>
<script src="/assets/jquery.ui.button.js?body=1"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script src="/assets/jquery.ui.mouse.js?body=1"></script>
<script src="/assets/jquery.ui.draggable.js?body=1"></script>
<script src="/assets/jquery.ui.resizable.js?body=1"></script>
<script src="/assets/jquery.ui.dialog.js?body=1"></script>
<script src="/assets/jquery.ui.droppable.js?body=1"></script>
<script src="/assets/jquery.ui.effect.js?body=1"></script>
<script src="/assets/jquery.ui.effect-blind.js?body=1"></script>
<script src="/assets/jquery.ui.effect-bounce.js?body=1"></script>
<script src="/assets/jquery.ui.effect-clip.js?body=1"></script>
<script src="/assets/jquery.ui.effect-drop.js?body=1"></script>
<script src="/assets/jquery.ui.effect-explode.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fade.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fold.js?body=1"></script>
<script src="/assets/jquery.ui.effect-highlight.js?body=1"></script>
<script src="/assets/jquery.ui.effect-pulsate.js?body=1"></script>
<script src="/assets/jquery.ui.effect-scale.js?body=1"></script>
<script src="/assets/jquery.ui.effect-shake.js?body=1"></script>
<script src="/assets/jquery.ui.effect-slide.js?body=1"></script>
<script src="/assets/jquery.ui.effect-transfer.js?body=1"></script>
<script src="/assets/jquery.ui.progressbar.js?body=1"></script>
<script src="/assets/jquery.ui.selectable.js?body=1"></script>
<script src="/assets/jquery.ui.slider.js?body=1"></script>
<script src="/assets/jquery.ui.sortable.js?body=1"></script>
<script src="/assets/jquery.ui.spinner.js?body=1"></script>
<script src="/assets/jquery.ui.tabs.js?body=1"></script>
<script src="/assets/jquery.ui.tooltip.js?body=1"></script>
<script src="/assets/jquery.ui.all.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
In Heroku, it look like this :
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery.ui.all.js"></script>
<script src="/javascripts/jquery_ujs.js"></script>
But the links in Heroku return not found!
For a special reason, I included the jquery in my head manually like this :
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery.ui.all' %>
<%= javascript_include_tag 'jquery_ujs' %>
Is this the reason things are failing? How to fix it without removing these from the head?
In (most) production setups, only the files in public/assets are available for use directly in link or script tags.
When you push to Heroku, it precompiles app/assets/javascripts/application.js by merging and compressing all javascript files required in application.js into a single file at public/assets/application-xxxxxx.js. Individual files, such as jquery.js, are not available. Therefore, it's recommended to use
<!-- HTML -->
javascript_include_tag 'application'
// inside app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
However, if you insist on including jquery manually without requiring it in application.js, you can add it to config.assets.precompile.
# config/environments/production.rb
config.assets.precompile += ['jquery.js', 'jquery_ujs.js']
(Note: A friend told me that Heroku doesn't read production.rb during precompilation. If that's the case, try adding the above to config/application.rb instead.)
When you push to Heroku and precompile your assets, you should see
$ rake assets:precompile
I, [] INFO -- : Writing public/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js
I, [] INFO -- : Writing public/assets/jquery_ujs-02181b3e64cd9e4e8548cad033516231.js
On Heroku, the script tags should now look like
<script src="/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js"></script>
In my application.html.erb I have:
<%= stylesheet_link_tag "application", :media => "all" %>>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
Which outputs something like this:
<link href="/assets/css-reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/globals.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-2.3.1/css/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home_screen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery-1.9.1.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js?body=1" type="text/javascript"></script>
<script src="/assets/home_screen.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="wvpCKeGQlyowV18CYU4V2Vn7f+IxHTK0zSkB2XVGajc=" name="csrf-token" />
How can I add output spacing for such results?
<link href="/assets/css-reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/globals.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-2.3.1/css/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home_screen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery-1.9.1.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js?body=1" type="text/javascript"></script>
<script src="/assets/home_screen.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="wvpCKeGQlyowV18CYU4V2Vn7f+IxHTK0zSkB2XVGajc=" name="csrf-token" />
you can try
stylesheet_link_tag("application", :media => "all").split("\n").join("\n ")
but you really think it worth the trouble?
You can see your HTML properly indented with firebug or something. Also this is more bytes to load while getting your webpage.
At first in production.rb
config.assets.compress = true
I change this and i run production mode.
Now all css and js are combined and view as
<link href="/assets/application-216f7d9bf69633b46766413cf646b8a5.css" media="all" rel="stylesheet" type="text/css" />
<script media="all" src="/assets/application-cfa3f1d1e18cc9a8acfb0492bd8ae99e.js" type="text/javascript"></script>
But now i want all css and js to load individually not in compress mode
so i changed
config.assets.compress = false
Now i want to so my ctrl U as like this
<link href="/assets/bootstrap-wysihtml5/core.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-wysihtml5/wysiwyg-color.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-wysihtml5/index.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/app_modules.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/assets.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/authentications.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/companies.css?body=1" media="all" rel="stylesheet" type="text/css" />
I mean all in uncompress form. But it is not workin.. again it comes in compress form like before. Do i have to clear cache or where i am missing?
In your application.rb you also need to disable asset pipeline for production mode.
application.rb :
# Enable the asset pipeline
config.assets.enabled = false