I am having trouble trying to rake assets:precompile in my rails 3.1 app. I keep getting the following error:
rake aborted!
Invalid CSS after "...und-image: url(": expected ")", was "<%= asset_path(..."
It seems that the erb preprocessor is not being invokeb but my file is called style.css.scss.erb. Any suggestions?
Ruby documentation seems a bit unclear on a few things such as the usage of the asset_path and other such helper in stylesheets. Anyways this is what I did to get around the exact same problem:
I decided to do this the SASS-way by changing my stylesheet extensions from css to scss.
The image references in my code were changed from
background-image: url(<%= asset_path 'blah.png' %>);
to
background-image: image-url("blah.png");
I found the necessary documentation on the sass helpers on one of the RailsGuides
I've also added the config.assets.digest = true line to my config/appliction.rb file because that seemed to get my output HTML to refer to the hashed filenames. Without the digest flag set to true I get all of my link tags starting off with <link href="/assets/print.css?body=1" ... or <href="/assets/favicon.png"... which pretty much defies the purpose of using the assets pipeline. Especially the favicon file will still be cached by the servers and CDN's along the way.Explicitely setting the digest flag to true gets me <link href="/assets/print-e47f5a48af04ce6854c840d74cd28fba.css?body=1" and <link href="/assets/favicon-15fb5e00d868940bc32db7996e10f594.png" ...
Change the file extension from
xxx.scss.css
to
xxx.scss.css.erb
and everything shoule be fine
Even though an answer has already been accepted, and my specific solution may not have solved the OP's issue, this question was the top google hit so thought this might help someone else. I couldn't accept the idea of having to change all my stylesheets to use the SASS-style asset paths instead of ERB-style, because ERB should work. After some digging, I realized that I had so many files with embedded ruby asset_path helpers, and I had missed one in the app/assets/stylesheets directory that still had just a .css extension (forgot to add .erb). Also, I was including vendor.css, and that included one other file in vendor/assets/stylesheets that needed the .erb. Finally, I was using an older version of svn which still used the .svn directories at every level of the hierarchy, and since I had a 'require_tree .' in application.css, the .svn-base files may have been getting compiled as well, and obviously wouldn't be run through the erb processor. Fixing all the above got me working again.
This is a sass-rails error, as discussed here.
I had the same question and found out that the solution is by installing sass-rais-path.
This gets Rails to work SASS + ERB as expected, even though you may continue using the asset_path helper.
Related
I am currently using Rails 4.0.2 with jQuery UI (mostly for the datepicker). My production environment is Heroku.
My main problem is that the images for my theme are not being served in production (while it works fine in development). I am including the theme's css like this in my application.css:
*= require_self
*= require_tree .
*= require jquery-ui-1.10.4.custom
The theme's css is showing up fine, but none of the images are working. I have read through endless questions on StackOverflow, blogs and discussions on Github - none of which have worked for me. I also read through the Edge Rails guide which doesn't mention a word about image precompilation, even though from the discussions on Github it seems that this has really changed in Rails 4.
Here is my current directory structure:
/vendor
/assets
/stylesheets
jquery-ui-1.10.4.custom.css
/images
animated-overlay.gif
ui-bg_flat_0_aaaaaa_40x100.png
(more images like these)
As far as I know the correct way of integrating external css and javascript libraries is to put those assets inside /vendor/assets so that is what I'm doing.
So again, my problem is that rails flatly refuses to serve any assets in production. I can fiddle with the image URL, but it's simply not getting served.
Here are things I have tried:
Force Rails 4 to precompile images
If I run rake assets:precompile I only see 2 files inside public/assets - a css file and a javascript file. I'm assuming this is wrong and that Rails should actually put my images there as well.
According to this question - rails 4 asset pipeline vendor assets images are not being precompiled - you need to explicitly tell Rails that you want images to be precompiled. (This seems rather insane to me, since I am pretty sure I am not the only Rails 4 site on the internet serving images. Is everyone else just using text and ASCII art?)
So I added this to my application.rb:
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Now when I run rake assets:precompile all my vendor assets are being compiled, fingerprinted and put in public/assets/images. This has no effect in production though, I suspect that Rails is simply refusing to serve the default assets and will only serve the fingerprinted assets.
Manually include the vendor images path
Some of the other things I read suggested that you need to manually specify the images path if it is outside of app/assets (since mine is in vendor/assets this seems to qualify).
config.assets.paths << Rails.root.join('vendor', 'assets', 'stylesheets', 'images')
When I now run rake assets:precompile my images are no longer being precompiled or fingerprinted, but they are also not being served in production.
According to this blog post - JQuery-UI css and images, and Rails Asset Pipeline - this is because Sprockets will see that a path is already included and will exclude it and you can fix it by prepending the path in application.rb.
initializer :after_append_asset_paths,
:group => :all,
:after => :append_assets_path do
config.assets.paths.unshift Rails.root.join("vendor", "assets", "stylesheets", "images").to_s
end
This also had no effect. When I run rake assets:precompile it doesn't compile or fingerprint my images and it doesn't show up in production. That post is targeted at Rails 3 so I didn't really have high hopes.
Move all images to app/assets/images
Even though this seems wrong to me (in the Rails sense) I moved all the images to app/assets/images. This still had the same result - images are not showing up in production. I also tried combining this with the trick of forcing images to be included in compilation:
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
But it didn't have any effect. I suspect Rails is simply being stubborn and not serving the non-fingerprinted assets.
Other things I have tried
The images being requested are done via css, so if I look in the actual theme's css file there are lines like this:
background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
Some things I read (mostly in the comments/complaints on Github and blog posts) suggested that the /images at the beginning of the url is screwing with me. So I manually went into the file and removed it everywhere, which had no effect - meaning images still didn't show up in production.
Things I don't want to try
According to this post - Rails 4: How To Fix The Heroku Assets Not Found CSS Image Issue - I should add this to my production.rb
config.assets.compile = true
I really don't want to do that since the asset pipeline does it by default and according to my knowledge (which might be completely wrong) it would be really bad for performance. For the same reason I don't want to just go ahead and add
config.serve_static_assets = false
to my production.rb since I don't want Rails serving static assets in production - I want Apache/nginx to do it.
How are you supposed to do this in Rails 4? Please help!
I finally managed to fix this issue. There are 2 parts to the solution. Firstly, you need to tell Rails to precompile images. As far as I can tell Rails (since 4.0) will no longer do this automatically to prevent gems you include from having all their assets precompiled when you don't really want this.
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Now your images should be getting precompiled (you can check this by running rake assets:precompile and looking at the results in public/assets).
Now you need to change your JQuery UI theme to reference the fingerprinted images instead of the plain image URL. So change the theme's filename extension to .scss (in my case it was jquery-ui-1.10.4.custom.css.scss) and do a find and replace in your theme - changing url to the SASS helper image-url. So, as an example,
url(images/ui-bg_glass_65_ffffff_1x400.png)
becomes
image-url('images/ui-bg_glass_65_ffffff_1x400.png')
I seem to be having major issues with the asset pipeline in Rails 3.2. It alls started because I wanted to add a single, simple style to my application.css.scss whilst working in the development environment. I have done this in the past with no problem and it just works because there is no caching occurring (as you would expect).
However, when I attempted to add the new style today, Rails refused to load the updated styles. I checked my environment settings and they all seem correct in development.rb,
config.assets.compress = false
config.assets.debug = true
I did some research and came across rails 3.1 asset pipeline css caching in development. Following the advice given in that question, I made sure that I deleted the tmp/cache folder as well performed a clean using rake assets:clean just in case I had run the app in production mode at some point and it needed cleaning up.
After all this, still no luck. Just to confirm that I hadn't made a bonehead mistake, I temporarily moved the style to another stylesheet. No problems! It worked perfectly! So I moved the style back and it won't load again.
I also checked the console. It reloaded the other stylesheet correctly but no mention of the original stylesheet.
Now, here comes the major issue. As a last ditch effort, I tried clearing my browser cache. I normally have no problems with it on but I thought something might be cached and causing problems. I cleared it and reloaded the app and.... no styles loaded whatsoever!
It seems that all of my application.css.scss styles were cached at some previous point and now I simply can't reload them!
UPDATE:
Although I still haven't fixed the problem, I've worked around it by creating a new stylesheet called main.css.scss (name not important) and moving all of the styles to the new stylesheet. This works because of the //= require_tree . directive in the manifest.
But if anyone can shed some light on why the original stylesheet stopped working, I would love to know!
try rm -r public/assets/*
maybe your assets:clean task is not working properly.
I was running into issues with Heroku showing my 'places.js' was not precompiled, even though im running on the cedar stack, and during the slug compilation it is running the rake precompile task. so i tried running it locally with rake assets:precompile RAILS_ENV=production and indeed rails was not precompiling my /app/assets/javascripts/places.js.coffee.erb asset.
my production.rb is using default rails 3.1 configuration, and i even tried removing the .erb from the asset, but to no avail.
I also thought since my places.js.coffee.erb asset is NOT included in the sprockets manifest (i include it manually in my app), perhaps it only precompiles assets in the manifest. Requiring it in the manifest didn't work either.
only my application.js.coffee and `application.css are precompiling (with and without a digest).
the only issue i found was possibly poor regex being used to match assets, but the default of (?:\/|\\|\A)application\.(css|js)$ does not match my asset, so it should be included.
i am not sure how to troubleshoot from here. everything is pretty much default. any thoughts on what could be happening here?
Firstly, if you want a file to compile when it is not in a manifest, you need to add it to the precompile config option:
config.assets.precompile += ['places.js']
Secondly, can you edit your question to include your manifest - it may be a syntax issue. I will edit this answer if I can see what the issue might be.
I had the same issue and resolved it like this:
# add new file /app/assets/javascripts/places_manifest.js
//= require places
# add a line to config/application.rb
config.assets.precompile += ['places_manifest.js']
# in your views include places_manifest, not places
javascript_include_tag 'places_manifest'
While the above solutions seem fine, I wondered why do I have to do this?
Like everyone else, I got the error in production stating that my newly added javascript file was not pre-compiled. It was however, I found it's code in the minified application.css file that Rails had generated on my production server.
The problem was that while developing, I thought I would need to add a javascript_include_tag helper to load my new javascript file. Adding that helper was the source of my particular error. I just removed it, and everything worked fine in both development and production environments.
So my suggestion to you is look for signs of your new .js file in your minified application.js and don't modify any other files as the above solutions suggest. Please point out the error in my ways if necessary ;)
The new rails 3.1 asset pipeline confused me a lot. In rails 3.0.x, with the sass gem, my global css file got updated when I edit .scss files. But in rails 3.1, that doesn't work anymore. It seems like I have to run a rake task to update my css files whenever I modify the .scss files. I feel like I misunderstand something about the new asset pipeline, but I don't know what it is. Can someone provide a solution or explanation to this problem? Thank you.
There are two possible causes of this. I am assuming that you are in development mode, and that all the gems are loaded.
1. Config
In development mode files are compiled on-demand and cached until any changes are made. You have to get the new 3.1 config options set in the right files or this might not work as expected.
Check out the Rails guides section on upgrading.
2. Extensions
The other is getting the extensions in the right order. For scss that would be file.css.scss. This tells Sprockets to parse the files as scss first, and that the have a css extension. If you had .erb on the end - file.css.scss.erb - then erb is processed first, then scss.
Upgrading apps is a bit tricky because so many things have changed. The asset pipeline guide has lots of useful information and advice.
Sass / SCSS has this built in already so you don't have to do ERB pre-processing.
image-url("image.png")
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
For me this problem resolved very easy.
I simple deleted all precompiled *.css files from assets/stylesheets and remain all *.scss files. Rails worked fine with *.scss directly, withoutn precompile.
I'm a ruby/haml/sass-beginner. I just installed ruby and rails for windows, haml, and sass (stand alone and plugin for rails).
I know how to convert and haml file into a html file (and vice versa):
haml index.haml > output.html
and how to convert a scss fiel into a css file (and vice versa):
sass --watch style.scss:style.css
I save more time converting scss files because every time I save a scss file the corresponding css file is automatically updated (i think that's the suppose of the watch command)
but for the haml files, I'm still doing it manually (haml index.haml > output.html).
I believe there's other ways to save time converting haml and scss files.
Any suggestions?
When you setup Rails to work with Haml, then start your development server, the Haml in your views get converted into HTML for you on-the-fly, so there's no need to watch for changes to your Haml separately.
However, if you're creating prototypes using just Haml and SCSS and not using the Rails stack at this stage, then there are a couple of useful tools you can use that automatically render your Haml and SCSS on page refresh:
Serve
http://github.com/jlong/serve
StaticMatic
http://github.com/staticmatic/staticmatic
Of these two, Serve is easier to use, but is not as powerful as StaticMatic. With Serve, all you need to do is install it (gem install serve) and type serve at the command line in the directory containing your Haml files. Then point your browser at http://localhost:4000. Full details here.
You can also hook-up Serve to make use of Compass the Sass meta-framework (which is awesome). There's a full tutorial here.
Oh, there's also dynamicmatic now too which might be good as well to look into. Basically similar to staticmatic but with some obvious differences that might be useful. I've used SM quite a lot recently and really like it. Very easy to use, very simple to set up and really does most things I need it to.