In my application, I have many controllers and tons of css which could potentially be conflicting if plopped all together. Because of this I am linking my stylesheets on a controller-to-controller basis. The Ruby on Rails Guides suggests the following:
You can also opt to include controller specific stylesheets and JavaScript files only in their respective controllers using the following:
%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag
params[:controller] %>
(I had to omit the first < from <%= because of Stack Overflow block quotes.)
Therefore, here is the resulting head of my application.html.erb file:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag params[:controller] %>
<%= stylesheet_link_tag params[:controller] %>
I have shared css for a navigation bar, which is #import[ed] in my application.css file, and that always works fine. The navigation bar is always styled properly.
The problem is, when I visit a specific page, on the first page request, the relevant css to that controller isn't loaded. And in the logs, a request is never made for the controller's stylesheets. But on the second page request, it gets styled, and the logs reveal that the stylesheets were requested.
Any reason why this is?
Below is some relevant code to this issue:
/*
* 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_self
*/
#import 'normalize';
#import 'sass_vars';
#import 'sitewide';
#import "https://fonts.googleapis.com/css?family=Nunito:300,400,700";
And in my config/initializers/assets.rb I added all of the names of my javascript and css files to the line
Rails.application.config.assets.precompile += ......
If you are not using Turbolinks, remove it from your project. It includes:
removing turbolinks gem
removing requires from application.js and application.css
removing data-turbolinks-track attribute from your layout
And consider using rails new --skip-turbolinks for your next project.
Related
I can't figure out how make certain .scss files work with certain views. I removed the *= require_tree . from the application.css.scss but I'm not sure where to go from there. The stylesheet_link_tag doesn't seem to recognize .scss files. What tag can I use to import .scss files to views?
I also tried creating a different controller for the different view but after I removed the require_tree the controller doesn't use the .scss file that was automatically generated with it.
In application.css remove *= require_tree.
In application.html add:
<head>
<%= yield :stylesheets %>
</head>
And on every page render:
<% content_for :stylesheets do %>
<%= stylesheet_link_tag "your file" %>
<% end %>
The most important piece you are probably missing is that Sprockets won't serve any asset, mainly the css and js need to be declared in your asset manifest. Quoting the docs:
If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the precompile array in config/initializers/assets.rb:
Rails.application.config.assets.precompile += ['admin.js', 'admin.css', 'swfObject.js']
Use the expected resulting name (with .css extension) and not the source file (with the .scss extension).
There is a way to organize your assets based on controller.
Rails guide has a section about it.
According to it you can create app/assets/stylesheets/projects.css.scss file for your ProjectsController and include it like this:
<%= stylesheet_link_tag params[:controller] %>
When doing this, ensure you are not using the require_tree directive, as that will result in your assets being included more than once.
Action based stylesheets can be created similarly:
<%= stylesheet_link_tag "#{params[:controller]}/#{params[:action]}" %>
if the scss file is in the root of the asset folder then
add line to your view file
=stylesheet_link_tag 'your_scss_file_name'
in \config\initializers\assets.rb
add this line
Rails.application.config.assets.precompile + =% w (your_scss_file_name.css)
As a bit of pre-text, I am used to Rails 2 but started building a sample app to get used to Rails 4 and I am having a nightmare with Sprockets and the asset pipeline even after reading the official guide and every question I can find on SO.
My css and js are included like so in my main view file:
<head>
...
<%= stylesheet_link_tag "application", media: "all" %>
<%= stylesheet_link_tag "style-responsive", media: "all" %>
<%= stylesheet_link_tag params[:controller], :media => "all" if stylesheet_exists?(params[:controller]) %>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<%= javascript_include_tag 'html5shiv' %>
<%= javascript_include_tag 'respond.min' %>
<![endif]-->
...
</head>
....
<%= javascript_include_tag "jquery-1.10.2.min" %>
<%= javascript_include_tag "jquery-ui-1.9.2.custom.min" %>
<%= javascript_include_tag "jquery-migrate-1.2.1.min" %>
<%= javascript_include_tag "bootstrap.min" %>
<%= javascript_include_tag "modernizr.min" %>
<%= javascript_include_tag params[:controller] if javascript_exists?(params[:controller]) %>
stylesheet_exists? and javascript_exists? are helper functions as I only want to include certain files when they are needed as opposed to the rest which are needed on every page.
The first error is:
Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( style-responsive.css )` to `config/initializers/assets.rb` and restart your server
If I then add that to assets.rb and restart, it moves on and the issue is repeated for every stylesheet_link_tag and javascript_include_tag in my view.
I could live with that even if it doesn't seem right but this comes crashing down when the interpreter gets to
<%= javascript_include_tag params[:controller] %>
Would I then need to also include every js file that I create for each controller? This seems wrong that I would have to constantly update the file whenever I create a new asset file.
In my application.css.erb I only have
*= require_self.
but I do have the old fashioned CSS #import for some stylesheets:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
#import url('bootstrap.min.css');
#import url('bootstrap-reset.css');
#import url('jquery-ui-1.10.3.css');
#import url('<%= asset_path 'css/font-awesome.min.css' %>');
#import url('custom-ico-fonts.css');
but all of these seem to work fine and don't need to be mentioned in assets.rb.
I have no requires set in application.js.
TLDR I think I am using Sprockets and the Asset Pipeline incorrectly, could someone please point out what it is I'm doing wrong and point me in the right direction?
I read about some similar issues to do with the sprocket-rails gem version 2.2.3 but I have 2.2.4 installed which is meant to have fixed any problems that existed in the previous version.
Rails 4.2.1
ruby 2.1.0p0 (2013-12-25 revision 44422) [x86_64-linux]
sprockets (3.0.1, 2.12.3)
sprockets-rails (2.2.4)
Sprockets wants to compact everything into a single file and minify it, so typically the pattern is to include all your javascript/stylesheets in the application manifests. There are plenty of good reasons for this pattern.
Since it appears you have removed the = require_tree . lines, this is not happening automatically and thus Rails wants to know about each individual file you plan to include separately via the assets.precompile configuration option. If requiring the entire directory is too aggressive, break your assets into subfolders and be more explicit about what you want to include.
Sprockets is relatively brittle and fighting against it is an uphill battle. So in both cases (JS/CSS), you should include it all and use selectors that are smart enough to scope page-specific styles or JS to that page.
That said, sometimes we cannot avoid having certain assets omitted from global inclusion. If you need to exclude a specific file from your manifest use a stub directive and include it separately with the HTML tag helpers.
Also note that you can have additional manifests (other files that include = require ... directives of their own) ... so long as you add those to the assets.precompile list.
The combination of stub and require directives and additional manifests should give you enough flexibility to organize your assets to your liking and make adding additional assets frictionless.
Ok so compiling my assets is working fine but when I run:
thin start -e production
none of my javascript or css is loading. My browser is also cancelling the requests to get my assets. I'm not sure why this is but I suspect its because it thinks its 404'ing on them. If you look at the top image you'll see that my application.css file was compiled and stored in my assets folder but when I try to access the file, I'm getting my 404.html file.
What gives!?
Edit:
I was asked to post my view. Here is some of the code in the project:
<% content_for :title, 'Quick Quote' %>
<% content_for :subtotal, get_subtotal %>
<% content_for :stylesheet_includes do %>
<%= stylesheet_link_tag "quote", "jquery-ui-timepicker-addon" %>
<% end %>
<% if #quote.errors.any? %>
<div class="flash alert">
<% #quote.errors.full_messages.each do |msg| %>
<div><%= msg %></div>
<% end %>
</div>
<% end %>
<h1>Quick Quote</h1>
my layout:
<!DOCTYPE html>
<html>
<head>
<title><%= (yield(:title) + " - " unless yield(:title).blank?).to_s + "Online Scheduler Order Taker" %></title>
<%= stylesheet_link_tag "application", "jquery-ui-timepicker-addon.css", :media => "all" %>
<%= yield :stylesheet_includes %>
<%= javascript_include_tag "application" %>
<%= yield :javascript_includes %>
<%= csrf_meta_tags %>
</head>
<body>
code in my production.rb
config.assets.precompile += %w( quote.css jquery-ui-timepicker-addon.css prices.css contact.css )
Top of my application.css.scss.erb:
/*
* 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_self
*
* require_tree . <- commented out
* require jquery-ui-timepicker-addon.css <- commented out
*/
my entire application.js file
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-ui-timepicker-addon.js
//= require_tree .
Check your config/environments/production.rb file and add next line to it (if it does not have it yet):
config.serve_static_assets = true
Rails recommends that this setting config.serve_static_assets by default should be disabled i.e. set to false. Here is the default configuration in config/environments/production.rb generated in rails app
Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = false
So if you are setting it to true in your local app then that's still fine. But if you are deploying your app on Apache or ngix or anything other than heroku then its not advisable to make config.serve_static_assets=true in your production.rb config file. Here is the documentation in Rails guides.
config.serve_static_files configures Rails itself to serve static
files. Defaults to true, but in the production environment is turned
off as the server software (e.g. NGINX or Apache) used to run the
application should serve static assets instead. Unlike the default
setting set this to true when running (absolutely not recommended!) or
testing your app in production mode using WEBrick. Otherwise you won't
be able use page caching and requests for files that exist regularly
under the public directory will anyway hit your Rails app.
URL - http://guides.rubyonrails.org/configuring.html
Rails 5:
Change config.public_file_server.enabled in production.rb to true or add RAILS_SERVE_STATIC_FILES with any value to env variables.
Reference: https://github.com/rails/rails/pull/18100
Can you put this line in your current environment.rb?
config.serve_static_assets=true
Reference: here
I have an app written in Rails 3.1 and I need completely to change the CSS styles in the project. I bought a template, deleted the current CSS styles from assets/stylesheets (including application.css) and pushed there the new CSS files.
Further I modified the stylesheet_link_tag with the names of new CSS files.
Then, when I open browser with the app, refresh the app - there are not loaded the new files. When I take a look at the generated source code, there are still the paths to the old CSS files.
I have read that probably would help me rake assets:precompile - but this is kind of impractical to every time, when I make a change in CSS files to run this command (which takes like 2 minutes I guess).
Is there any better way to handle it?
Thank you
*EDIT: * In the <head> tag:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "jquery-ui" %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "application" %>
Could it be just a browser cache? Try to force the reload (ctrl+f5).
Try to delete <your_app>/tmp/cache and restart the server.
Unless you decide to switch off the asset pipeline (which I don't recommend because it's actually pretty good), you're going to have to build yourself a new application.css. If you don't to that, your CSS files won't be recognized at all.
Just think of it as an inventory of every one of your CSS files. You can use this as a template.
/*
*= require cssfile1
*= require cssfile2
*/
And then, revert the stylesheet link tag to its original form in your layout. Inside your `application.html.erb', remove any reference to your CSS files and use this instead:
<%= stylesheet_link_tag "application", :media => "all" %>
Yup, importing new asset files into a rails application isn't a straightforward proposition.
Im very new to ruby, learning from some tutorials in a book i bought. I'm aware the books going to date quick and i think possibly already has.
I'm trying to get the follow code to load my stylesheets and my js to the page.
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
However this is not working, when i load my rails server and locally view my app from the tut, the css and js are both not loading. There is no reference to them in the head. Is this a date way to do it or perhaps something else is wrong? Any help would be appreciated, like i said im totally new and not a dev by trade so go easy on me.
Regards
V
Using rails 1.9.3-p0
First of all I advise you to look for information on asset pipeline for rails 3 ( you can start with Railscast)
To load your js files change
<%= javascript_include_tag :defaults %>
to
<%= javascript_include_tag "application" %>
and your application.js should be sth like
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
the last line loads your js files from assets folder