I am developing my first ruby on rails web application at the moment and I have a little bit of a problem. I would need two pages (a start page and a login page) which haven't the application.html.erb layout.
At the moment I gained that by adding:
layout false
To my login_controller.rb file. But now I am unable to use the twitter bootstrap components which i included in the /assets/stylesheet and /assets/javascripts folder.
Can someone show me a best practice method how to add pages without the layouts and design from the application.html.erb, but still can use the twitter bootstrap components?
You can create a different layout file including only the assets you need.
A typical scenario I usually face is the administration section of a web site where the layout changes from the public section.
In that case you can create a layout views/layouts/admin.htm.erb like this:
<!DOCTYPE html>
<html>
<head>
<title>Admin</title>
<%= stylesheet_link_tag "admin", :media => "all" %>
<%= javascript_include_tag "admin" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
As you can see there are two different manifest files for the js and css assets.
That means there are two files:
/assets/javascripts/admin.js
/assets/stylesheets/admin.css
Like in the application.js and application.css you can require bootstrap and other assets you may need for that specific layout.
Here an example:
/*
* 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 bootstrap
*= require_self
*/
The last thing
You need to tell rails to precompile the new manifest files you created.
In /config/environments/production.rb
# Precompile additional assets (application.js.erb, application.css, and all non-JS/CSS are already added)
# config.assets.precompile += %w( search.js )
config.assets.precompile += %w( admin.css admin.js )
NOW YOU CAN USE THE LAYOUT
In your controller:
layout "admin"
Related
I have a clients.css and jobs.css in the assets/stylesheets location.
Each has a respective controller. Jobs was created with a scaffold after clients. The scaffolds.scss file is blank.
application.css is blank
When I code a change such as body{color:black} in the jobs.css, it changes the clients/index.html.erb view and the jobs/index.html.erb view.
What could be the reason for this? I would like to have separate .css files for jobs and clients..
From the documentation:
Sprockets concatenates all JavaScript files into one master .js file
and all CSS files into one master .css file.
What this means, of course, is that when you make a change to jobs.css, you'll see the same css being applied to every matching element throughout your application. All of those separate .css files are there to help you keep things organized from a human perspective, rather than from the perspective of your application.
You might want to just come up with different IDs and classes depending on your page (like #body_client and #body_job) to differentiate them, but you can see how this naming convention could get unwieldy as your app grows.
Having separate assets is possible, but not without some pain.
In application.js, remove:
//= require_tree
In application.css, remove:
*= require_tree
In application.html.erb, add the following:
<%= stylesheet_link_tag "application", params[:controller], :media => "all" %>
<%= javascript_include_tag "application", params[:controller] %>
Create a new initializer file at config/initializers/assets.rb and add the following code:
%w( clients_controller jobs_controller ).each do |controller|
Rails.application.config.assets.precompile += ["#{controller}.js.coffee", "#{controller}.css"]
end
That should get you set up with separate per page assets. Check the original blog post for more details.
New to Rails (Have used it for 3 weeks). I have several views and their corresponding scss file.
For example,
Views
view1.html.erb
view2.html.erb
view3.html.erb
Stylesheet
view1.scss
view2.scss
view3.scss
When I load view1.html inside <head> of the page all three stylesheet file are been loaded (I actually do now need view2.css and view3.css at this moment).
Is there a reason behind it? Why not just load the static file the current page need? For example, only load view1.css in page view1.html.
I do know in production environment all these will be combined into one single file. Is that because all these static assets will be cached by the browser so load a single file at the first time make the subsequent visit much faster?
The reason I ask this question is because I would like only include controller specific stylesheets in the page. I have tried code below but which cause non ppreprocess error.
<%= javascript_include_tag params[:controller] %>
<%= stylesheet_link_tag params[:controller] %>
I am still reading the doc at link below,
http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets
Thanks for your time viewing the question.
You can try achieve that in this way,
If you generate a controller named Userscontroller
Rails adds new files at app/assets/javascripts/users.js.coffee and another at app/assets/stylesheets/users.css.scss.
You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as
<%= javascript_include_tag params[:controller] %>
or
<%= stylesheet_link_tag params[:controller] %>
First, disable the default loading of all stylesheets by removing any extra requires in the application.css manifest.
*= require_tree .
Remove this line or change to,
* require_tree . // removed '='
Tell Rails to compile our controller assets
By default, the asset pipeline only compiles application.js/.css and any files they require. Because we removed the require_tree . directive, we need to tell Rails about our controller-specific assets or they won’t get compiled.
Create a new initializer file called config/initializers/assets.rb and add the following (replacing the controller names with your own):
%w( controller_one controller_two controller_three ).each do |controller|
Rails.application.config.assets.precompile += ["#{controller}.js.coffee", "#{controller}.css.scss"]
end
Note: You can rename the css.scss to css also.
Check this link for details
Explicitly declare all controllers make me feel bad, therefore, we replace #Sravan 's solution to the code below,
Rails.application.config.assets.precompile << /(^[^_\/]|\/[^_])[^\/]*$/
Rails.application.config.assets.precompile += ["*.js.es6", "*.scss"]
Im a newbie to Ruby and Rails and wanted to know how to add custom.css to be last css file call in DOM.
Also, if I need Js to be last and not above the header, what's the correct way of doing this.
Currently everything coming from the assets folder in Rails order.
Thanks...
You can add:
<%= stylesheet_link_tag "custom", :media => "all" %>
to the bottom of the layouts file and add custom.css to your precompile list:
# /config/environments/production.rb
config.assets.precompile += %w( custom.css )
But your application.css file will still compile with custom.css.
You can stop it compiling in application.css by setting which files are included in the application.css file. Change,
# /app/assets/stylesheets/application.css
/*
*= require_tree .
*/
to
/*
*= require first_css
*= require second_css
*/
which will ignore the custom.css file. It's very similar for the javascript. See http://guides.rubyonrails.org/asset_pipeline.html for more info.
In your layout.erb you can include everything you need under your layout itself
I just did a major upgrade to Rails 3.2 and the newest Sass and Coffee Rails Gems, but my Application file won't render as Application.css.scss. I had it in my html as such:
<%= stylesheet_link_tag 'application.css.scss' %>
And when I look at the Page Source in my Development mode I'm getting
<link href="/assets/application.css.scss.css" media="screen" rel="stylesheet" type="text/css" />
What the heck is going on!?
It seems to append .css to everything I put inside the stylesheet_link_tag, so if i leave it as just 'application' in my page source I have application.css, etc.
The appropriate format for the tag is:
<%= stylesheet_link_tag 'application' %>
Rails automatically compiles the .scss file into a .css file -- then it automatically imports the correct file. It's all take care of for you.
If you don't append an extension to stylesheet_link_tag, .css will be appended automatically. I do not know why it's appending the extension when you are specifying .scss, however.
I'm also not sure why you don't just use <%= stylesheet_link_tag 'application' %>, which should be all that's necessary.
See the documentation for stylesheet_link_tag here for more info.
I think the "default" way to do this in Rails 3.2 using Sprockets is to have file called application.css (not application.css.scss) that contains your Sprockets manifest code. Which should look something like this...
application.css (app/assets/stylesheets)
/*
* 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 main_scss_file
*/
There should be at least two lines one should be the require_self which adds the content inside itself and the require some_other_file which is a reference to your main scss file.The default behavior of rake assets:precompile is to compile your application.js and application css
production.rb coded generated by Rail generators specifies that application.css is compiled by default. (config/environments)
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
# config.assets.precompile += %w( search.js )
config.assets.precompile += %w( home.js )
application.erb
<%= stylesheet_link_tag 'application' %>
I was wondering if there was a way to ignore a css file from being added to the manifest application.css file.
The reason why I want to do this is that I have two versions of the site, a mobile version, an an web version. The mobile version's css is currently being added to the manifest, and messing with the style of the main page.
Is there anyway to configure the manifest file to exclude a certain css file?
Remove the require_tree directive and add just the files you want, in the order you want them to application.css. Leave out the mobile CSS file.
To access the mobile CSS file you need to add it to the precompile list in
production.rb:
config.assets.precompile += ['mobile.css']
This will allow you to use the standard rails helper to access the mobile css:
<%= stylesheet_link_tag "mobile" %>
as distinct from the application.css file.
One tip for these situations is that you can share CSS files between manifests. For example, if you have a CSS reset in a separate file this can be added to both manifests (assuming you make the mobile css a manifest too).
What I ended up doing was creating subdirectories under app/assets/stylesheets called app/assets/stylesheets/web and app/assets/stylesheets/mobile
Then place an application.css with the standard:
/* ...
*= require_self
*= require_tree .
*/
inside each of your new web and mobile folders. Then to access them:
# just use this
<%= stylesheet_link_tag "web/application", :media => "all" %>
# or this as needed
<%= stylesheet_link_tag "mobile/application", :media => "all" %>