CODEWITHSUNDEEP
ruby-on-railsasset-pipeline
gruuuvy
gruuuvy

Reputation: 2129

Rails 4 - production images and fonts not pointing to fingerprint

I imported a custom theme into my Rails app for the home page. I've copied the entire folder into app/assets/customlibrary so that I don't have to split up the theme's files.

When I run my app in the production environment, Rails isn't able to find the fingerprinted assets in app/assets/customlibrary/* when they are referenced in app/assets/customlibrary/css/style.css.

For example in style.css, background: url("../images/hero-image.jpg") results in GET http://localhost:3000/assets/images/hero-image.jpg 404 (Not Found)

I can't figure out how to fix this. Any advice?

folder structure

app/assets/customlibary/css/*
app/assets/customlibary/css/style.css
app/assets/customlibary/js/*
app/assets/customlibary/fonts/*.(svg|eot|woff|tff|)
app/assets/customlibary/images/*
app/assets/customlibary/images/hero-image.jpg

app/assets/stylesheets/themes/theme.css'
app/assets/stylesheets/style1.css'
app/assets/stylesheets/style2.css'

application.rb

config.active_support.escape_html_entities_in_json = true
config.filter_parameters += [:password]
config.encoding = "utf-8"

# setup bower components folder for lookup
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'bootstrap-sass-official', 'assets', 'fonts')
config.assets.paths << Rails.root.join('app', 'assets', 'customlibrary')

# customlibrary assets
config.assets.precompile += %w( css/* fonts/* images/* js/* )
# normal stuff
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
config.assets.precompile << /\.(?:png|jpg)$/
config.assets.precompile += %w( base.css )
config.assets.precompile += ['themes/theme.css']
config.assets.precompile += ['style1.css', style2.css', ... ]

production.rb

config.cache_classes = true

config.eager_load = true

config.consider_all_requests_local       = false
config.action_controller.perform_caching = true

config.serve_static_assets = true

config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass

config.assets.compile = false

config.assets.digest = true

config.assets.version = '1.0'

config.log_level = :debug

Upvotes: 1

Views: 575

Answers (1)

max
max

Reputation: 102213

Adding a path in config.assets.paths does not mean it makes the asset available from the web root of your application. (Which is my_app/public)

It adds a directory to the lookup path used by Sprockets and the asset helpers. When linking to assets from your stylesheets you can change the extension to .css.erb and use interpolation:

.class { background-image: url(<%= image_path 'image.png' %>) }

If you are using SASS, sass-rails maps the Rails asset helpers to SASS functions so you can just use:

.class { background-image: image-url("image.png") }

This does not require you to rename the file.

Upvotes: 1

Related Questions