I tried many things but my navbar is not showing properly on browser, just because sccs is not loading. This application was a Rails API Application and I converted to regular application. Maybe something went wrong on this process.
Assets/Stylesheets/application.scss
// Your CSS partials
#import "components/index";
Assets/Stylesheets/Components/_index.scss
// Import your components CSS files here.
#import "navbar";
Assets/Stylesheets/Components/_navbar.scss
Environments/development.rb
config.assets.debug = true
config.assets.quiet = true
config.assets.compile = true
application.rb
require_relative 'boot'
require 'rails/all'
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module RailsJwt
class Application < Rails::Application
# Initialize configuration defaults for originally generated Rails version.
config.load_defaults 6.0
# Settings in config/environments/* take precedence over those specified here.
# Application configuration can go into files in config/initializers
# -- all .rb files in that directory are automatically loaded after loading
# the framework and any gems in your application.
end
end
I am new here so I don't know which other parts of my application I should show.
Since you converted an API-only Rails application to use CSS I'm assuming you haven't configured Webpacker to handle your front end assets. This link may be helpful: https://onrails.blog/2020/02/20/using-css-in-rails-6/
The most important for you is probably adding the following to your app/views/application.html.erb file:
<%= stylesheet_link_tag 'application', media: 'all' %>
If you're using Webpacker, adjust accordingly. Also, I don't think Rails 6 ships with the sprockets gem so you may have to add that to your Gemfile, unless you plan on using Webpacker.
Related
I am receiving this error when I try to load a page in my new rails 5.1 app using webpacker. I would like webpacker to handle CSS as well.
Started GET "/" for ::1 at 2017-09-01 12:20:23 -0400
Processing by HomeController#welcome as HTML
Rendering home/welcome.html.erb within layouts/application
Rendered home/welcome.html.erb within layouts/application (0.4ms)
Completed 500 Internal Server Error in 28ms
ActionView::Template::Error (Webpacker can't find application.css in /Users/myusername/Documents/testing-ground/myapp/public/packs/manifest.json. Possible causes:
1. You want to set wepbacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. Webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your Webpack configuration is not creating a manifest.
Your manifest contains:
{
"application.js": "/packs/application-1ba6db9cf5c0fb48c785.js",
"hello_react.js": "/packs/hello_react-812cbb4d606734bec7a9.js"
}
):
7: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
8: <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
9: <%= javascript_pack_tag 'application' %>
10: <%= stylesheet_pack_tag 'application' %>
11: </head>
12:
13: <body>
app/views/layouts/application.html.erb:10:in `_app_views_layouts_application_html_erb__1178607493020013329_70339213085820'
I am running the ./bin/webpack-dev-server alongside the rails server. I created the app using:
rails new myapp --webpack
bundle
bundle exec rails webpacker:install:react
I have a single CSS file app/javascript/src/application.css. (Writing that makes me feel something is wrong. Putting css inside of a javascript directory seems improper.)
I just have single root route defined root to: 'home#welcome'.
Here is app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Myapp</title>
<%= csrf_meta_tags %>
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
</head>
<body>
<%= yield %>
</body>
</html>
Here is my config/webpacker.yml (I have tried also setting compile to false in development.
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .coffee
- .erb
- .js
- .jsx
- .ts
- .vue
- .sass
- .scss
- .css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
dev_server:
host: localhost
port: 3035
hmr: false
https: false
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production demands on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true
I don't want to add too many details up-front incase they are more distracting then helpful. Please ask for anything else and I'll add to my question. Thanks!
In your application.js :
import "path to application.css"
I had this exact problem, on Rails 5.2 with Webpack's current version as of Dec 5, 2018 (4.2.x?) and just resolved it.
The fix for me was renaming application.css to anything else. I think there was a naming collision with Webpack.
So now my pack tags look like:
<%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
I did NOT need to import the stylesheet inside application.js. This appears to make no difference for me.
OPTIONAL BONUS: I also renamed the app/javascript to app/webpack because I also thought it was confusing to run styles out of a Javascript directory (and learned from this youtube video that it could be done: https://www.youtube.com/watch?v=I_GGYIWbmg0&feature=youtu.be&t=32m35s). Simply:
Rename the directory to app/webpack
Adjust webpacker.yml like so: source_path: app/webpack
Hope that helps.
When HMR is set to false the styles are inlined within the bundle so you won't get any css bundle.
In your webpacker.yml file, setting hmr to true should fix your problem.
I realize this is an old question. Relevant, though.
In "config/environments/production.rb":
config.public_file_server.enabled = true
Delete "public/assets" and "public/pack"
And run:
RAILS_ENV=production bundle exec rake assets:precompile
I had the same problem and solved it with running yarn add postcss-smart-import in console.
upd: rails 5.2, webpacker 3.5, default config.
I had this problem or Rails 6.0.3.1.
I updated the file app/assets/config/manifest.js
//= link_directory ../../javascript/packs
//= link_directory ../images
Then restart in your terminal:
bin/webpack-dev-server
I had such problem even with import "path/to/application.css" line in application.js
In my case it was because test assets was precompiled with different node version
node modules was installed with node version v12
but test assets was compiled with with node version v10
assets were compiled but when I've looked inside public/pack-test/application.[hash].js and grep application.scss I saw an error line about node-sass missing.
In my cause problem was with Rubymine IDE - it somehow cache $PATH value from time when I had default node version v10 in nvm.
I hope my store will have somebody, who will encounter similar issue in future.
Revise Insallation Guide
Revise the version of webpacker (in package.json and Gemfile.lock with git story) if had recent changes withou you concerns.
All major errors are fixed when you revise: installation official guide
For me, for example, after revised I needed to add some files in /packs/application.js, include this at the top of the file:
import 'core-js/stable'
import 'regenerator-runtime/runtime'
I cleared webpacker's cache and it started working again for me:
rm -rf tmp/cache/webpacker
I'm using different layouts for different sections of my app. In my controller I have either:
def index
#user = current_user
#orders = #user.orders.all
render layout: 'admin'
end
OR
class ProductsController < ApplicationController
layout "inventory"
#...
end
And in my assets I've got: layout_theme.css.scss, layout_login.css.scss, etc
And in my views/layouts I've got theme.html.haml, login.html.haml etc.
After making setting my app for production and using the following command to precompile the assets: bundle exec rake assets:precompile --trace
When I try to load the page, I get only two request for assets: layout_theme.css and layout_theme.js and an error.
I've tried adding this to my config/application.rb:
config.assets.precompile += %w( layout_home.css layout_home.js layout_login.css layout_login.js layout_theme.css layout_theme.js )
Which cover the additional files I'm using but it didn't work. What am I missing?
EDIT: I can see the files compiled in public/assets/layout_theme...css and public/assets/layout_theme...js but it seems rails is not referencing the compiled files in the app
i have an asset pipeline problem in rails 4.
i have a directory in testapp/public/assets/ which has all hashed or fingerprinted css and javascripts bootstrap.min-58853fb115aba672ce98597de33da61b.js OR animate-d81627498b7ff4acf1a1964da02db789.css however in browser i see not hashed css and javascripts like <link rel="stylesheet" media="all" href="/stylesheets/bootstrap.min.css">
i need to request the hashed files in my public/assets/
i have landing controller and one method
views/landing/one.html.erb
<%= render "shared/headmeta" %>
<%= render "shared/headcss"%>
<%= render "shared/headscript"%>
<%= render "shared/header"%>
<h1>Landing#one</h1>
<p>Find me in app/views/landing/new.html.erb</p>
<%= render "shared/footer"%>
<%= render "shared/jscript"%
>
css manifest in landing.scss
/* ...
*= require animate
*= require bootstrap.min
*= require default
*= require style
*= require overwrite
*/
headcss partial is :
<!-- Bootstrap core CSS -->
<%= stylesheet_link_tag "bootstrap.min", media: "all", "data-turbolinks-track" => true %>
<!-- Overwrite bootstrap style -->
<%= stylesheet_link_tag "overwrite", media: "all","data-turbolinks-track" => true %>
<!-- Animate css -->
<%= stylesheet_link_tag "animate", media: "all","data-turbolinks-track" => true %>
<!-- Heading font -->
<%= stylesheet_link_tag "stylesheet", media: "all","data-turbolinks-track" => true %>
<!-- General font -->
<%= stylesheet_link_tag "http://fonts.googleapis.com/css?family=Open+Sans", media: "all" ,"data-turbolinks-track" => true%>
<!-- Font icons -->
<%= stylesheet_link_tag "simple-line-icons", media: "all","data-turbolinks-track" => true %>
<!-- Flexslider -->
<%= stylesheet_link_tag "flexslider", media: "all","data-turbolinks-track" => true %>
<!-- Custom styles for this template -->
<%= stylesheet_link_tag "style", media: "all","data-turbolinks-track" => true %>
<!-- Theme skin -->
<%= stylesheet_link_tag "default", media: "all","data-turbolinks-track" => true %>
my gemfile
source 'https://rubygems.org'
#gem devise
gem 'devise'
#sprockets is a rack-based asset packaging system that concatenates and serves Js,coffescript,css,LESS
gem 'sprockets', '~> 2.12.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use yui as compressor for JavaScript assets
gem 'yui-compressor', '~> 0.12.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
production.rb
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
# Code is not reloaded between requests.
config.cache_classes = true
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both threaded web servers
# and those relying on copy on write to perform better.
# Rake tasks automatically ignore this option for performance.
config.eager_load = true
# Full error reports are disabled and caching is turned on.
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Enable Rack::Cache to put a simple HTTP cache in front of your application
# Add `rack-cache` to your Gemfile before enabling this.
# For large-scale production use, consider using a caching reverse proxy like
# NGINX, varnish or squid.
# config.action_dispatch.rack_cache = true
# Disable serving static files from the `/public` folder by default since
# Apache or NGINX already handles this.
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :yui
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
# Asset digests allow you to set far-future HTTP expiration dates on all assets,
# yet still be able to expire them through the digest params.
config.assets.digest = true
# `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
# Specifies the header that your server uses for sending files.
# config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true
# Use the lowest log level to ensure availability of diagnostic information
# when problems arise.
config.log_level = :debug
# Prepend all log lines with the following tags.
# config.log_tags = [ :subdomain, :uuid ]
# Use a different logger for distributed setups.
# config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)
# Use a different cache store in production.
# config.cache_store = :mem_cache_store
# Enable serving of images, stylesheets, and JavaScripts from an asset server.
# config.action_controller.asset_host = 'http://assets.example.com'
# Ignore bad email addresses and do not raise email delivery errors.
# Set this to true and configure the email server for immediate delivery to raise delivery errors.
# config.action_mailer.raise_delivery_errors = false
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation cannot be found).
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners.
config.active_support.deprecation = :notify
# Use default logging formatter so that PID and timestamp are not suppressed.
config.log_formatter = ::Logger::Formatter.new
# Do not dump schema after migrations.
config.active_record.dump_schema_after_migration = false
end
config/application.rb
require File.expand_path('../boot', __FILE__)
require 'rails/all'
require "sprockets/railtie"
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module Marketpersona
class Application < Rails::Application
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.
# Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
# Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
# config.time_zone = 'Central Time (US & Canada)'
# The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
# config.i18n.default_locale = :de
# Do not swallow errors in after_commit/after_rollback callbacks.
config.active_record.raise_in_transactional_callbacks = true
config.assets.enabled = true
end
end
config/initializers/assets.rb
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
Rails.application.config.assets.compress = true
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added
#Rails.application.config.assets.precompile << Proc.new do |path|
# if path =~ /\.(css|js)\z/
# full_path = Rails.application.assets.resolve(path).to_path
# app_assets_path = Rails.root.join('app', 'assets').to_path
#if full_path.starts_with? app_assets_path
#Rails. logger.info "including asset: " + full_path
#true
#else
# Rails.logger.info "excluding asset: " + full_path
# false
#end
#else
# false
#end
#end
Rails.application.config.assets.precompile = ['*.js', '*.css', '*.css.erb']
public/assets output of some files
/public/assets# ls
animate-d2e7ae01911a05d8ce767b98def4ae3a.css jquery.smooth-scroll-5f54331165eef2a11b63f6d615d4556e.js.gz
animate-d2e7ae01911a05d8ce767b98def4ae3a.css.gz jquery.ui.totop-d23c655a6d2cb2716708132fbd150f5e.js
animate-d81627498b7ff4acf1a1964da02db789.css jquery.ui.totop-d23c655a6d2cb2716708132fbd150f5e.js.gz
animate-d81627498b7ff4acf1a1964da02db789.css.gz jquery.ui.totop-d5647d1f3ae94dc679d5767720d0ab73.js
application-88198fbec2cb093a4a5545b36197d203.js jquery.ui.totop-d5647d1f3ae94dc679d5767720d0ab73.js.gz
application-88198fbec2cb093a4a5545b36197d203.js.gz jquery_ujs-0b8f09cf5aec4ba1be1abd9f915c77e2.js
application-9ebac1bd19f3ba981afd79fd2c5f2037.css jquery_ujs-0b8f09cf5aec4ba1be1abd9f915c77e2.js.gz
application-9ebac1bd19f3ba981afd79fd2c5f2037.css.gz landing-307af29ac27a030829bb53a3718d3987.js
application-a6b3011ab79b9f60d493732939ce4f50.css landing-307af29ac27a030829bb53a3718d3987.js.gz
application-a6b3011ab79b9f60d493732939ce4f50.css.gz landing-7c3fe69fe5644297d4d87fdcc4b915d4.css
application-aceb45182f1f0486e0e79c02dea65c4e.css landing-7c3fe69fe5644297d4d87fdcc4b915d4.css.gz
application-aceb45182f1f0486e0e79c02dea65c4e.css.gz landing-8f6eecd1178ef85964369ec66d33c4f1.js
application-d012cec9935d5b05e1b812ccc6f3cf6d.css landing-8f6eecd1178ef85964369ec66d33c4f1.js.gz
application-d012cec9935d5b05e1b812ccc6f3cf6d.css.gz landing-9b1e28a2786f16d823f619cdc65d8a40.css
application-e038cd04ae9494b6950481cfc5d4d749.css landing-9b1e28a2786f16d823f619cdc65d8a40.css.gz
application-e038cd04ae9494b6950481cfc5d4d749.css.gz landing-a7374c322246655f8a4a6d05689e50ae.css
application-e1d3507ada82fdd954d492f952b28619.js landing-a7374c322246655f8a4a6d05689e50ae.css.gz
application-e1d3507ada82fdd954d492f952b28619.js.gz landing-d728d395d4bd4966f84f4acdd1d6691c.css
bootstrap.min-58853fb115aba672ce98597de33da61b.js landing-d728d395d4bd4966f84f4acdd1d6691c.css.gz
You have 9 stylesheets you are including in one page/app? Why not compile them into one using a manifest?
I really am not sure what is going on here... So you are not getting the compiled files in your production environment?
I may be misreading your question, but are you creating your own css manifest files other than application.css, for example assets/stylesheets/shared/? Then in your production.rb (environment) file you need to tell Rails to compile them:
AppName::Application.configure do
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
config.assets.precompile += ['shared/filename.css', 'shared2/filename2.css']
end
Run RAILS_ENV=production bundle exec rake assets:precompile then add, commit and deploy your changes to production.
To cut a long story short, because I wasted enough time with this stupid framework.
I want to use pure CSS, no SCSS, no css.erb, no mumbo-jumpo that adds more overhead parsing, even if it is 2ms more.
My production.rb file has (I am using webrick):
Properties::Application.configure do
# Settings specified here will take precedence over those in config/application.rb.
# Code is not reloaded between requests.
config.cache_classes = true
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both thread web servers
# and those relying on copy on write to perform better.
# Rake tasks automatically ignore this option for performance.
config.eager_load = true
# Full error reports are disabled and caching is turned on.
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Enable Rack::Cache to put a simple HTTP cache in front of your application
# Add `rack-cache` to your Gemfile before enabling this.
# For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid.
# config.action_dispatch.rack_cache = true
# Disable Rails's static asset server (Apache or nginx will already do this).
config.serve_static_assets = true
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
# config.assets.css_compressor = :sass
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
# Generate digests for assets URLs.
config.assets.digest = true
# Version of your assets, change this if you want to expire all your assets.
config.assets.version = '1.0'
# Specifies the header that your server uses for sending files.
# config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true
# Set to :debug to see everything in the log.
config.log_level = :info
# Prepend all log lines with the following tags.
# config.log_tags = [ :subdomain, :uuid ]
# Use a different logger for distributed setups.
# config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)
# Use a different cache store in production.
# config.cache_store = :mem_cache_store
# Enable serving of images, stylesheets, and JavaScripts from an asset server.
# config.action_controller.asset_host = "http://assets.example.com"
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# config.assets.precompile += %w( search.js )
# Ignore bad email addresses and do not raise email delivery errors.
# Set this to true and configure the email server for immediate delivery to raise delivery errors.
# config.action_mailer.raise_delivery_errors = false
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation can not be found).
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners.
config.active_support.deprecation = :notify
# Disable automatic flushing of the log to improve performance.
# config.autoflush_log = false
# Use default logging formatter so that PID and timestamp are not suppressed.
config.log_formatter = ::Logger::Formatter.new
end
Now I have a simple css file under assets/stylesheets called general.css, and it contains this simple line:
html{
background-image:url('homepage_bg_1.jpg');
}
Now I have tried:
background-image:url('assets/homepage_bg_1.jpg');
background-image:url('public/assets/homepage_bg_1.jpg');
background-image:url('public/homepage_bg_1.jpg');
background-image:url('assets/images/homepage_bg_1.jpg');
Nothing works!! It browser still looks for a 'homepage_bg_1.jpg' image which is normal, but in my public assets folder I have 'homepage_bg_1-de4a0800c51d578f152fe5ca821136a6.jpg'.
I am using RAILS_ENV=production bundle exec rake assets:precompile to precompile my assets.
Now I would assume that Rails is not stupid enough, and will look for that file. But it doesnt. Can somebody just tell me what's wrong with this framework? Should I open an issue in Github? Is the framework trying to make us not use CSS?
If you don't want Rails to touch any of the assets you can put them in the public directory.
That way you won't have any fingerprinting or unwanted preprocessing. They will be served "as is". You don't have to mess with the Rails settings or do any precompilation.
And if you some day choose to use the asset pipeline again you can use both methods.
If you want to use fingerprinted assets in your stylesheets and javascript files you NEED preprocessing on those assets in order to use the asset pipeline helper methods. Rather than ranting and raving try and read the ever-so-informative guides.
You've rightly identified that your asset is compiled with a fingerprint, this is for asset expiry and is an integral part of the pipeline. In order to interpolate the correct filename to your other assets you need to use the helpers provided. For ERB use asset_path, and with Sass you have image-url/image-path/asset-url/asset-path/etc depending on your requirement.
Have you tried using the image helpers in your CSS for it to reference the digest version of your image?
Something like...
html {
background-image: image-url('homepage_bg_1.jpg');
}
This will put a reference to the image with the digest string appended to the name automatically for you.
I have a Rails App it's css and js links works fine locally since I have used :
<link href="assets/bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/font-awesome.css" rel="stylesheet">
<link href="assets/bootswatch.css" rel="stylesheet">
I Googled more than it should all I find is this Heroku Guide , I'm so confused about the assets pipeline thing! I ran this command as well :
bundle exec rake assets:precompile
and it did create some files in the public dir as mentioned in the guide :
Now on Heroku Everything is plain, no design no nothing of Css and JS.
While when I run
Heroku Logs
This is what I get some serious NO Route Match for the CSS and JS files as follow :
2013-06-10T10:06:28.184255+00:00 app[web.1]: ActionController::RoutingError (No route matches [GET] "/assetscv.png"):
This is only one line, I get bunch of more of these for other files, and pre generated loggs lines
any help would be appreciated Thanks!
PS:
I tried
<%= stylesheet_link_tag "bootstrap" %>
<%= stylesheet_link_tag "bootstrap-responsiv" %>
<%= stylesheet_link_tag "bootswatch", "font-awesome.css" %>
I got bunch of errors and on heroku it says sorry something went wrong
In application.rb(config/application.rb)
# Enable the asset pipeline
config.assets.enabled = true
After this in production.rb file(config/environments/production.rb) do like this
# Settings specified here will take precedence over those in config/application.rb
# Code is not reloaded between requests
config.cache_classes = true
# Full error reports are disabled and caching is turned on
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Disable Rails's static asset server (Apache or nginx will already do this)
#config.serve_static_assets = true
# Compress JavaScripts and CSS
config.assets.compress = true
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = false
# Generate digests for assets URLs
config.assets.digest = true
then you should include all your js and css like this,
config.assets.precompile += %w(jquery.js jquery_ujs.js PIE.js check_list.js dom-drag.js jquery-1.4.2.min.js jquery-1.7.1.min.js jquery-1.8.3.js jquery-ui.js jquery.accordion.js jquery.corner.js jquery.countdown.js jquery.dimensions.js jquery.masonry.min.js jquery.tinycarousel.min.js jquery.validationEngine-en.js jquery.validationEngine.js questionnaire.js prototype.js users.js)
config.assets.precompile += %w(ie7.css ie8.css about_us.css admin_menu.css blog.css default.ultimate.css designer_directory.css designer_directorynew.css drop.css greenstore.css menu.css MenuMatic_dev.css message_view.css product.css setting1.css style1.css styles.css validationEngine.jquery.css)
After that precompile using this command
$ RAILS_ENV=production bundle exec rake assets:precompile
Then $ heroku restart
It should work.
For more details please read http://guides.rubyonrails.org/asset_pipeline.html