How do I get main.css.erb in application.css
My application.css
-
*= require_self
*= require 'main.css'
*= require 'styles.css'
*= require 'jquery.ui'
*= require 'main.css.erb'
*/
but main.css.erb
not included which contains
background-image: url(<%= asset_data_uri 'data.png' %>) !important;
My main page
<%= stylesheet_link_tag 'application', :media => "all",'data-turbolinks-track' => true %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
I don't want to use *= require_tree.
in application.css
to keep the css page separate from each other.
How can I use main.css.erb
in the RAILS 4
development pipeline and assets in production
Thanks.
source to share
I don't want to use * = require_tree. in application.css so that page specific css will remain separate from each other.
In that case, why don't you include the file in yours layout
directly:
<%= stylesheet_link_tag 'application', 'main', :media => "all",'data-turbolinks-track' => true %>
This will allow you to include the CSS file separately, both during development and in production.
Of course, this recommendation does not take into account the problems with the filenames and file extensions you have:
In a production environment, Sprockets uses the fingerprint scheme outlined above. By default, Rails assumes the assets have been precompiled and will serve as static assets by your web server.
You mentioned that you want to keep your file separate from other CSS. require_tree
matches exactly require
- it calls the file to be included in your file application.css
.
There is nothing wrong with that, except that if you want to include files separately, you want you to save them separately. To do this, you must assign main
precompilation to your array:
#config/application.rb
config.assets.precompile += ["main.css"]
This means that when you run your application in production, you will be able to use the file main.css
independently of the other.
-
Name
Finally, and probably most acutely, you need to make sure that you only call one file main
. The reason is that no matter if you use css
, erb
or scss
, the file will always be converted to a filecss
This means that if you have multiple files with the same name, Rails will get confused (as you discovered). To fix this, you need to make sure you can name the files you need individually.
-
Finally, as indicated in Sampriti Panda
, you must use the preprocessor scss
over erb
in the pipeline of your asset. The main reason for this is that the preprocessor allows assets to be precompiled for free
I would change your file erb
to this:
#app/assets/stylesheets/main.css.scss
.your_element {
background-image: asset_url('data.png');
}
This will work for both dynamic and static file
source to share
Do you have a file main.css
and main.css.erb
? If so, then these two files are the same for asterisks, and therefore only the first ( 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
source to share
From fooobar.com/questions/1032458 / ...
From rails 3.1, the asset pipeline allows you to use asset helpers inside your css file. The css parsers are not tied to the controller / action, but the ruby ββparser can now solve some problems like image path references
This way you can rename it as main.css.scss
a directory app/assets/stylesheets
and it should work.
source to share