When i move to production many assets are missing. There is no background image but there are styles for background from css. Many JS doesn't load ..
I put in config production.rb :
config.cache_classes = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.assets.compress = true
config.assets.compile = false
config.assets.digest = true
In application.rb :
config.assets.precompile += %w( ie.css )
config.assets.paths << "#{Rails.root}/app/assets/fonts"
but fonts doesnt load. I see in public/assets all fonts but there isnt any on my site.
Can someone write answer - how config application to work on production ? Why i have xxx.jpg from css file but havent got yyy.jpg from that same css file..
CSS for background:
body{
line-height: 1;
background: #fff url('wallpaper.jpg') top left;
IMAGES location - assets/images
FONTS location - assets/fonts
Sometimes in chrome console i see :
GET ..../assets/wallpaper.jpg 404 (Not Found) xxxxxx/:11
GET...../assets/main_page.png 404 (Not Found) xxxxxx/:30
GET ...../assets/fonts/Lato-Bol.ttf 404 (Not Found)
and sometimes not, but always there is no fonts and many assets.
My application css:
*= require_self
*= require chosen
*= require fancybox
*= require page
*= require_tree .
*/
Try using image-url instead of url.
background: #fff image-url('wallpaper.jpg') top left;
From the Asset Pipeline documentation:
When using the asset pipeline, paths to assets must be re-written and
sass-rails provides -url and -path helpers (hyphenated in Sass,
underscored in Ruby) for the following asset classes: image, font,
video, audio, JavaScript and stylesheet.
Related
I read through every link on Stack Overflow and Google. I have spent many hours trying stuff. But could not figure this issue out.
I have following folder structure in my app assets
app
->images
->application (folder)
image1..
image2..
->icons (folder)
image3..
image4..
I have application.css file in my stylesheets folder like below:
app
->stylesheets (folder)
application.css
->application (folder)
app.css
The application.css has following entry:
*= require_tree ./application
Thus it is loading my app.css file which has all the css for my app. In my app.css I am using :
{background: url('icons/user-business-gray.png') no-repeat 2px center transparent;}
My config/environments/production.rb has :
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
#config.serve_static_assets = false
config.assets.compile = false
config.assets.digest = true
My config/initializers/assets.rb has :
Rails.application.config.assets.paths << Rails.root.join( "app/assets/images/application")
I did :
RAILS_ENV=production rake assets:precompile
I can see all my images hashed in public/assets, public/assets/application and public/assets/icons properly.
It all works fine in development mode. But I cannot see any images referenced in in app.css file in production mode.
If I add an image to .erb directly using <%= image_tag('icons/user-business-gray.png') %> I can see the image correctly. But I cannot see any images referenced from app.css as referenced above.
I even changed the name of app.css to app.css.scss and referenced the image like :
{background: url(assets-path('icons/user-business-gray.png')) no-repeat 2px center transparent;}
but still the same issue. Any help is much appreciated.
Try changing the filename to app.css.scss and using the assert-url helper:
{background: asset-url('icons/user-business-gray.png') no-repeat 2px center transparent;}
This has fixed the issue:
{background: image-url('icons/user-business-gray.png') no-repeat 2px center transparent;}
I feel like I tried all solutions I found here and on some blogs but something is still wrong and I have no idea what.
My error:
...
Started GET "/fonts/amaze.ttf" for 83.9.18.180 at 2014-11-26 09:10:21 +0000
...
app[web.1]: ActionController::RoutingError (No route matches [GET] "/fonts/amaze.ttf"):
...
Of course on localhost it isn't working either.
I am using rails 4.1.1
My font is located in:
assets/fonts/amaze.ttf
I even relocated it to check if it would work: assets/amaze.ttf -it wasn't.
My current solution in application.css.scss file:
#font-face {
font-family: 'Amaze';
src: font-url('amaze.ttf');
}
.amaze {
font-family: 'Amaze';
}
I tried some configuration in application.rb but had no effect:
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/fonts"
config.serve_static_assets = true
config.assets.js_compressor = :uglifier
config.assets.compile = true
config.assets.digest = true
config.assets.version = '1.0'
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
Do I even have to configure anything in application or development/production files?
EDIT
(kind of) FIXED a PROBLEM
The problem was that I had a broken font...
more details:
I had font from here http://fontzone.net/download/amaze-normal
and it was broken (I mean not exactly broken, it worked on linux, but not with font-face, no idea why, if it's worth anyone's efforts give it a try to figure out what was the issue)
I tried another font from another source:
http://www.fontcubes.com/Amaze.font
and it worked! yey! -
EDIT
I had similar issue with more fonts (both otf and ttf) so I would say problem is still open ;p
Utilize the Asset Pipeline or move your fonts to the public directory.
Your problem here is that the path /fonts/amaze.ttf is not hitting the Rails Asset Pipeline. It would need to be prefaced with /assets in order to use the Asset Pipeline, like /assets/fonts/amaze.ttf or /assets/amaze.ttf.
You have two main options here:
Update the path request:
So use /assets/amaze.ttf instead of /fonts/amaze.ttf.
Be aware that in order for the path /assets/fonts/amaze.ttf to work you would need to put the amaze.ttf font in /app/assets/fonts/fonts/ or /vendor/assets/fonts/fonts/. The double fonts directory ensures there is a fonts directory in /public/assets after the assets are compiled. See this answer for more info.
Move your fonts directory to your public directory:
Since the requested path doesn't utilize the Asset Pipeline anyway, you can simply move your fonts directory to the /public/ directory and the web server will automatically serve it. So your font(s) should be located at /public/fonts/amaze.ttf, etc.
That should do it!
I have also face this problem with font-awesome but it is my general research for fonts.
I create a new directory under app/assets , named fonts. Then copy all the Fonts there and include it to the assets in application.rb file , like this :
config.assets.paths << Rails.root.join("app", "assets", "fonts")
rename your font-awesome.css to font-awesome.css.scss.erb and change the #font-face declaration in it like this
#font-face { font-family: "FontAwesome"; src: url('<%= asset_path('fontawesome-webfont.eot')%>');
src: url('<%= asset_path('fontawesome-webfont.eot?#iefix')%>') format('eot'),
url('<%= asset_path('fontawesome-webfont.woff')%>') format('woff'),
url('<%= asset_path('fontawesome-webfont.ttf')%>') format('truetype'),
url('<%= asset_path('fontawesome-webfont.svg#FontAwesome')%>') format('svg');
font-weight: normal; font-style: normal; }
Hope this will helpful :)
There are more ref Font-face
For me it was a file permission error, I had copied the files from another computer. once I fixed the permissions, it worked.
For me, it was as simple as my import in application.scss used https// instead of https:// for the URL. Gotta read closely next time.
Thanks guys.
I found a solution, why not put fonts/*.ttf into app/assets/images/fonts/*.ttf for dev env?
At the same time keep config/environments/development.rb still the default config.serve_static_assets = false false value.
This works for me.
So here's what the application.css.scss file looks like:
// require_tree .
body { color: red; }
And there are 3 other css files in the app/assets/stylesheets/ directory.
The output? A single stylesheet tag in head, pointing at an uncompressed application.css.
Oddly enough the JavaScript is doing just fine, requiring all it needs.
I've checked this repository vs other repositories: No difference as far as I can tell in config variables
I believe you're missing an =. Try this:
/*
*= require_tree .
*/
body {
color: red;
}
One of the functions of the asset pipeline is the lump all the css into one file. Is there some styles which are not working as a result of the compilation?
I would like to stop importing my Sass files with Sprocket and using the #import function of Sass.
It works fine but the files are not imported one by one in developement mode so the debuging is harder.
Is there a way to import all files separately with Sass in developement mode?
You can enable asset debugging in Sprockets by adding the setting to your development.rb:
# Expands the lines which load the assets
config.assets.debug = true
When debug is true, compiled CSS files contain line numbers that tell you where to find the uncompiled CSS:
/* line 5, ../../../app/assets/stylesheets/_colors.scss */
.color-facebook-blue {
color: #3B5998;
}
My stylesheet has:
.asc {
font-size: 2em;
background-image: url(/images/up_arrow.gif);
}
.desc {
background-image: url(/images/down_arrow.gif);
}
The font-size works but the background image (arrow) doesn't.
I get ActionController::RoutingError (No route matches [GET] "/images/up_arrow.gif"):
I tried lots of things in routes but nothing worked.
Try this:
.asc { font-size: 2em; background-image: url(/assets/up_arrow.gif); }
.desc { background-image: url(/assets/down_arrow.gif); }
That's how I do it in a 3.1 app I'm working on. Your /images is probably mapped to app/public/images.
Finally found that I needed to do the new precompile of assets step.
'I shoulda read the manual'
Compiled assets are put in public/assets directory by default (the destination is defined in config.assets.prefix).
To create compiled versions of your assets use bundle exec rake assets:precompile
If you don't have write access for the production file system, use this task locally and then copy the compiled asset files.
The asset compilation process:
1. Concatenates & compresses all JavaScript files into one master. Uglifier is the default for the process.
2 Compresses (minifies) all CSS files into one master .css file. CSS is compressed by yui by default.
3. Allows for high level languages like coffeescript to use the assets.
Note: It is possible (though not a great idea) to disable the asset pipeline by changing config/application.rb and set
config.assets.enabled = false
You can skip the asset pipeline when creating a new application with the —skip-sprockets option, e.g. rails new appname --skip-sprockets
You can also set config.assets.compile = true This way the assets are only compiled when a request for them is made.
Dumb question perhaps, but are you positive that /images/up_arrow.gif exists?
When you 404 on an public asset in it just falls through to the rails router. It's not really a routing problem; you just get a routing error because there are no routes defined for static assets.
I had this same issue with Rails 3.2.13.
Solution was to modify the css to this:
.asc { font-size: 2em; background-image: url(up_arrow.gif); }
.desc { background-image: url(down_arrow.gif); }