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

Question

My application.css is

 *= require_self
 *= require 'main.css'
 *= require 'styles.css'
 *= require 'jquery.ui'
 *= require 'main.css.erb'
 */

but main.css.erb is not included which contains

 background-image: url(<%= asset_data_uri 'data.png' %>) !important;

My main page is

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

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

How can I use main.css.erb in RAILS 4 development and assets pipeline in production Thanks.

Answer 1

This is because you have 2 main.css included.

Try changing your code into this :

*= require_self
 *= require main
 *= require styles
 *= require jquery.ui

Answer 2

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

Answer 3

Do you have a main.css and a main.css.erb file? If so, then those two files are the same for sprockets, and hence only the first one (main.css) is included.

Rename one of the files and get rid of the file extensions in your manifest file, i.e.:

*= require_self
*= require main
*= require styles
*= require jquery.ui
*= require main2

Answer 4

From https://stackoverflow.com/a/10075329/1466095

From rails 3.1 asset pipeline enables you to use asset helpers inside your css file. The css parsers is not binded a controller/action scope, but the ruby parser is now able to resolve some issues like image path references

So you can rename it as main.css.scss inside the app/assets/stylesheets directory and it should work.