Possible to Use Stylesheet.Css.Erb in Rails

Possible to use stylesheet.css.erb in Rails?

I dont think so. Whats your intention - to use variables and have them be evaluated at runtime, or "compile" time (meaning like deploy time?). Also, what would be the ERB binding? Would it bind to the controller, like views and helpers are, so that ERB instance would have access to the instance variables set in the controller? I just pose this question as more of a theoretical exercise.

If you want to use variables in your CSS than you can use Haml's SASS. You dont get access to the controller's scope but you do get basic variables and looping. Plus other cool stuff like mixins.

How do I require main.css.erb in application.css

I dont want to use *= require_tree. in application.css so that page
specific css will remain separate to each other.

In that case, why don't you include the file in your layout directly:

<%= stylesheet_link_tag  'application', 'main', :media => "all",'data-turbolinks-track' => true %>

This will allow you to include the CSS file separately, both in development & production.

Of course, this recommendation is discounting the naming & file extension issues that you have:

Precompile

In the production environment Sprockets uses the fingerprinting scheme
outlined above. By default Rails assumes assets have been precompiled
and will be served as static assets by your web server.

You mention you want to keep your file separate from other CSS. require_tree is exactly the same as require -- it calls a file to be included in your application.css file.

There is nothing wrong with this, except if you want to include the files separately, you'll want to ensure you keep them separate. To do this, you should assign the main to your precompilation array:

#config/application.rb
config.assets.precompile += ["main.css"]

This means that when you run your application in production, you'll be able to use the main.css file independent of any other.

Name

Finally, and probably most poignantly, you'll need to make sure you call only one file main. The reason is that regardless of whether you use css, erb or scss, the file will always be transformed into a css file

This means if you have multiple files with the same name, Rails will become confused (as you've discovered). To remedy this, you have to ensure you're able to name the files you need individually

Preprocessor

Finally, as mentioned by Sampriti Panda, you should opt to use scss preprocessor over erb in your asset pipeline. The main reason for this is that the preprocessor allows you to precompile the assets with impunity

I'd change your erb file to this:

#app/assets/stylesheets/main.css.scss
.your_element {
    background-image: asset_url('data.png');
}

This will work both as a dynamic and static file

For a Rails View *.html.erb : where can I place the style sheet?

Where you put the stylesheet is fine. You need to make sure that your application layout (app/views/layouts/application.html.erb) includes the stylesheets in the header:

stylesheet_link_tag 'application'

Then you need to make sure it's being included in your application manifest: app/assets/stylesheets/application.css

At the top you should see a block that looks like this:

/* ...
*= require_self
*= require_tree .
*/

If it doesn't say *= require_tree . then it won't autoload the scss files in your stylesheets directly. For more see the rails guide.

If your application layout and manifest are correct and you're still having issues, add the text of those files to the question and I'll take a look.

Update: Also, it looks like you're not understanding layouts correctly.

When any view renders you want the final output to look like this:

<!DOCTYPE HTML>
<html>
  <head>
    ...header stuff goes here...
  </head>
  <body>
    ... body stuff goes here...
  </body>
</html>

Your headers etc. are pretty much standard stuff that are repeated all the time, only the content in the main part of your page is different from page to page. So to keep you from having to duplicate this stuff over and over again Rails uses layouts.

Your layout file, app/views/layouts/application.html.erb should look like this (at minimum)

<!DOCTYPE html>
<html>
  <head>
    <title>The name of your site</title>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_include_tag 'application' %> 
    <%= csrf_meta_tags %>
  <head>
  <body>
    <%= yield %>
  </body>
</html>

When you load a given view rails will fill in the content from that view where the yield command is in the layout.

Note, your view is named wrong. If you are showing a list it should be app/views/listings/show.html.erb, or if you are showing the index of all the lists it should be app/views/listings/index.html.erb.

Then in that file you should have:

<h1>This file is:"index.html.erb"</h1>

See the rails guide for more about layouts and rendering.

However, it looks like you're trying to dive into rails with no idea what's going on in the system. Welcome to Rails, I think you'll find it's really great, but you will do yourself a huge favor to start with a good tutorial. You can try the Getting Started Guide. I also recommend Michael Hartl's book "Rails 3 Tutorial". It's a great resource.

How to add one more stylesheet in application.html.erb in Rails 4

I don't like to add a line of code about "authenticate.css" in "config/initializers/assets.rb". Is this the only way to add a style sheet in view in Rails 4 or am I doing something wrong ?

If you look at docs, it says

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

so this line basically tell rails to precompile individual assets.

If I am not wrong, this wasn't the case in rails 3

If you look at this pull request you'll see that sanity checks from the sprockets_better_errors gem have been merged into Rails 4.1. The intent is to reveal asset pipeline errors that you would see in production when you run the app in development mode

How do I use CSS with a ruby on rails application?

Put the CSS files in public/stylesheets and then use:

<%= stylesheet_link_tag "filename" %>

to link to the stylesheet in your layouts or erb files in your views.

Similarly you put images in public/images and javascript files in public/javascripts.

Rails How to include a scss file in a specific erb view?

Because you are including it independently, and not including it in your application.css. The default for the asset pipeline is to compile applicaiton.css/application.js and anything that is included in those files.

/*
 * 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require c3
 *= require purecss
 *= require_self
 *= require pure_css_reset
 */

If you want it to be seperate and not compiled into the one monolithic file, being called from your stylesheet_link_tag, you have to manually add it to the precompile array.

http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets is a good reference.

Possible to Use Stylesheet.Css.Erb in Rails