Rails 4 not updating css in dev when changes are made - ruby-on-rails

I've been struggling with this for a while, but basically every time I make a change to my css files listed below (layout.scss for instance), I have to stop the server and run rake assets:clobber then restart the server before I can see the changes.
Needless to say, this is extremely tedious. Below is my config; please let me know if there is anything else you'd like me to post.
Gemfile
source 'https://rubygems.org'
ruby '2.2.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.5'
# DB Tools
gem 'pg'
gem 'money-rails'
gem 'pluck_to_hash'
# View Development Tools
gem 'sassc-rails'
gem 'haml-rails'
gem 'friendly_id', '~> 5.1.0'
# View Display Tools
gem 'jquery-rails'
gem 'font-awesome-rails'
# Form Tools
gem "cocoon"
gem 'amoeba'
# Angular Tools
gem 'angularjs-rails', '~> 1.4.7'
gem 'angular-rails-templates'
gem 'angular_rails_csrf'
# API Tools
gem 'active_model_serializers', '~> 0.10.0.rc2'
gem 'easy_diff'
# Authentication / Authorization
gem 'devise'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
gem 'sdoc', '~> 0.4.0', group: :doc
# Hosting, Serving & Deployment
gem 'puma'
gem 'foreman'
# Env specific
group :development do
gem 'awesome_print', :require => 'ap'
gem "better_errors"
gem "binding_of_caller"
gem 'annotate', '~> 2.6.6'
gem 'seed_dump'
end
group :development, :test do
gem 'byebug'
gem 'web-console', '~> 2.0'
gem 'spring'
end
development.rb
Rails.application.configure do
config.cache_classes = false
config.eager_load = false
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
config.action_mailer.raise_delivery_errors = true
config.active_support.deprecation = :log
config.active_record.migration_error = :page_load
config.assets.debug = true
config.assets.prefix = "/dev-assets"
config.assets.digest = false
config.serve_static_files = false
config.assets.raise_runtime_errors = true
config.sass.inline_source_maps = true
config.action_mailer.default_url_options = { host: 'localhost', port: 8080 }
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
address: "smtp.gmail.com",
port: 587,
domain: ENV["GMAIL_DOMAIN"],
user_name: ENV["GMAIL_USERNAME"],
password: ENV["GMAIL_PASSWORD"],
authentication: "plain",
enable_starttls_auto: true
}
end
application.css
/*
*= require_self
*= require application-loader
*/
application-loader.scss
// common/
#import 'common/flexbox.scss';
#import 'common/baseline.scss';
#import 'common/fonts.scss';
#import 'common/mixins.scss';
#import 'common/common.scss';
#import 'common/forms.scss';
#import 'common/layout.scss';
#import 'common/pages.scss';
#import 'common/svg.scss';
#import 'authenticated/modules/stats.scss';
// authenticated/
#import 'application/application-layout.scss';
#import 'application/application-forms.scss';

After chasing down an idea brought up by #gates in the comments of my original answer, I came across this blog post
Basically, since sprockets wasn't doing the loading, it seems that it wasn't recompiling changes to individual files (though I don't know why an overall recompile wasn't updating), so on the instruction of the blog, I now have sprockets loading all the files and I import mixins as necessary. Something like this:
application.css
/*
*= require_tree ./common
*= require_tree ./authenticated
*= require font-awesome
*= require_self
*/
authenticated/authenticated-layout.scss
#import '../flexbox.scss';
#import '../mixins.scss';
body {
// etc...
}
I can now make a change to any of my scss files and reload the page without having to clobber the assets and/or restart the server!

Do you think we need to add the file in 'initialisers/assets.rb'? This worked for me once.

Related

Coffeescript Not Updating in Heroku

So, I've made a few changes to my web app that's hosted on Heroku and then I did my usual
git add .
git commit -m
git push
git push heroku
There were no errors during any of those commands... But then when I check the website, it seems like all the changes got pushed except for the changes in my Coffeescript file. And when I look at the source code of the webpage, I see the old JS code... It's like it skipped the changes in the coffeescript file.
There were no errors in the push and the coffee script file was in the list of files when I did the commit.
Here's what I've tried so far:
Add to my gemfile
gem 'therubyracer'
Add to Production.rb:
config.assets.compile = true
config.assets.initialize_on_precompile = true
Restarted Heroku server
Deleted my browser data...
None of this worked. Someone please help or point me in the right direction.
This is my Gemfile:
source 'https://rubygems.org'
ruby "2.2.1"
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.4'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sprockets-rails'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'gon'
group :development, :test do
gem 'byebug'
end
group :development do
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
gem 'web-console', '~> 2.0'
gem 'spring'
end
group :production do
gem 'pg', '0.17.1'
gem 'rails_12factor', '0.0.2'
gem 'puma', '2.11.1'
gem 'therubyracer'
end
And this is production.rb File:
Rails.application.configure do
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
config.assets.js_compressor = :uglifier
config.assets.compile = true
config.assets.initialize_on_precompile = true
config.assets.digest = true
config.log_level = :debug
config.i18n.fallbacks = true
config.active_support.deprecation = :notify
config.log_formatter = ::Logger::Formatter.new
config.active_record.dump_schema_after_migration = false
end
Thanks!
you likely have an error in your js or css that is keeping your assets from compiling. try compiling locally by running:
rake assets:precompile
then add and commit again before re-deploying.

rake aborted! Sass::SyntaxError: Undefined variable: "$alert-padding"

I got stuck on production environment for rails application because my assets are not compiled. When I use
rvmsudo bundle exec rake assets:precompile RAILS_ENV=production --trace
It throws rake aborted! Sass::SyntaxError: Undefined variable: "$alert-padding"
Here is my Gemfile:
source 'https://rubygems.org'
gem 'rails', '4.2.3'
gem 'mysql2', '~> 0.3.11'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.2.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'haml'
gem 'haml-rails'
gem 'devise', github: 'plataformatec/devise'
gem 'html2haml'
gem 'simple_form'
gem 'validates_formatting_of'
gem 'tzinfo-data'
gem 'therubyracer', platforms: :ruby
gem 'twitter-bootstrap-rails'
gem 'jquery-validation-rails'
gem 'sprockets-rails', :require => 'sprockets/railtie'
gem 'jquery-turbolinks'
gem 'paperclip'
gem 'fancybox-rails'
gem 'css3-progress-bar-rails'
group :development do
gem 'spring'
gem 'pry-rails'
gem 'better_errors'
end
group :development, :test do
gem 'rspec-rails'
gem 'factory_girl_rails'
end
gem 'delayed_job_active_record'
# Need daemons to start delayed_job
gem 'daemons'
gem 'rails_config', '~> 0.4.2'
gem 'cancan'
gem 'two_factor_authentication'
gem 'twilio-ruby'
gem 'binding_of_caller'
gem 'rest-client'
Here is my porduction.rb
Rails.application.configure do
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_files = true
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass
config.assets.compile = false
config.assets.compress = false
config.assets.digest = true
config.log_level = :debug
config.action_mailer.perform_deliveries = true
config.action_mailer.delivery_method = :smtp
config.action_mailer.raise_delivery_errors = true
config.i18n.fallbacks = true
config.active_support.deprecation = :notify
config.action_mailer.default_url_options = { :host => Settings.PROD_URL }
config.log_formatter = ::Logger::Formatter.new
config.active_record.dump_schema_after_migration = false
end
And application.css:
/*
*= require_tree .
*= require_self
*/
So, why i am getting rake aborted! Sass::SyntaxError: Undefined variable: "$alert-padding" while compiling.
My production works but no css is loaded to it.
$alert-padding variable is used before being defined. It may be caused by a wrong order of css files in application.css. require_tree loads all files from the current folder in alphabetical order (I guess), but you need some styles to loaded in specific order.
It seems like you're using bootstrap-sass gem. Consider the following instruction from the gem's README: https://github.com/twbs/bootstrap-sass#a-ruby-on-rails You need to rename application.css to application.scss and use #import instead of require.
Just add these lines in your config/application.rb if you are using scss instead of css.
config.assets.precompile << %w( *.scss *.js )
With SASS you have to include your variables before they're called.
Dir globbing / Sprockets include files alphabetically:
This has the problem that files are required alphabetically. If your directory has jquery-ui.js and jquery.min.js then Sprockets will require jquery-ui.js before jquery is required which won't work (because jquery-ui depends on jquery).
This means if you're using a variables.sass (or similar), you'll want to either rename it, or include it explicitly:
/*
*= require variables
*= require_tree .
*= require_self
*= stub variables
*/
Even better (since you're using SASS), use the #import directive:
#app/assets/stylesheets/application.sass
#import variables
#import *
I had a same issue
I just added this two lines in environment/production.rb
config.assets.compile = true
config.assets.precompile += %w( active_admin.css.scss )
It works for me.

application.css.scss not compiled on Rails 4

I felt strange that why the style not loaded,
So I wrote wrong content intentionally on application.css.scss,
And precompile and load the page didn't give me any error.
I thought the application.css.scss file must not be loaded and compiled.
Unfortunately, it seems no to be.
application.css.scss
#i2dmport "compass";
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require jquery.fileupload-ui
*= require dropzone/dropzone
*= require dropzone/basicdew
*= require_tree .
*/
#import "layout";
application.rb
config.autoload_paths += %W(#{Rails.root}/app/pdfs)
config.autoload_paths += %W(#{config.root}/lib/)
# 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)'
config.assets.paths << "#{Rails.root}/vendor/themes"
Gemfile (I not sure if there any conflict)
source 'http://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.5'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.17.1'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
# 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', '~> 1.2'
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
gem "bootstrap-sass", "~> 3.1.1"
gem "compass-rails"
gem "therubyracer"
gem "execjs"
gem "hirb-unicode"
gem "devise", "~> 3.3.0"
gem "devise_ldap_authenticatable", "~> 0.6.1"
gem "net-ldap"
gem "will_paginate", "~> 3.0"
gem "rspec"
gem "awesome_print", require: "ap"
gem "tinymce-rails"
gem "simple_form"
gem "haml-rails"
gem "taps"
gem "analytics-ruby"
gem "bcrypt-ruby"
gem "bourbon"
gem 'cancancan', '~> 1.8'
gem "sunspot_rails"
gem "sunspot_solr"
gem "simple-navigation"
gem "simple-navigation-bootstrap"
#fast command
gem "spring", group: :development
#Handy tools for active record
gem "squeel", "~> 1.2.1" # Last officially released gem
# gem "squeel", :git => "git://github.com/activerecord-hackery/squeel.git" # Track git repo
gem 'prawn'
gem 'rb-readline', "~> 0.5.0.pre.1"
gem 'chartkick'
gem 'rails-erd', :group => :development
gem 'quiet_assets', group: :development
gem 'curb'
gem 'rest_client'
# only for assets not required in production mode
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jquery.fileupload-rails', "~> 1.10.0"
gem 'twitter-bootstrap-rails'
group :development do
gem "faker"
gem "rspec-rails"
gem "guard-rspec"
gem "pry"
gem "pry-remote"
gem "pry-nav"
gem 'pry-rescue'
gem 'pry-stack_explorer'
end
gem "paperclip", "~> 4.1"
gem 'dropzonejs-rails'
layout
!!!
%html
%head
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
= stylesheet_link_tag params[:controller]
= javascript_include_tag "application", "data-turbolinks-track" => true
= javascript_include_tag params[:controller], "data-turbolinks-track" => true
i had this exact same problem and was driving me crazy. i had a app/assets/stylesheets/mycustom_stylesheet.css.scss with the styles that loaded fine in development but when i deployed to production on heroku, none of my styles appeared. i solved it by placing the file custom.css in my vendor/assets/stylesheets directory with this content:
/*
*= require mycustom_stylesheet
*/
i also added this line to my initializers/assets.rb file although i'm not sure its necessary.
Rails.application.config.assets.precompile += %w( mycustom_stylesheet.css )
May be you have an "application.css" file inside of your "/vendor/themes/" or "/lib" folder ?
What happens if you remove this line "config.assets.paths << "#{Rails.root}/vendor/themes" from your application.rb file?
Try running below command
RAILS_ENV=production rake assets:precompile
or
RAILS_ENV=development rake assets:precompile
Today I came across a similar problem that changes in application.css.scss does not update in page styling. Later I found out that is because there is an error in my .scss file, ul being misspelled as u1. After the error is fixed, the styling finally updates in page refreshes, with no need to restart rails server.

How come helper.distance_of_time_in_words_to_now Time.now works in development but not production

I can call
helper.distance_of_time_in_words_to_now Time.now in development and it works just fine, but for some reason in production I am now getting translation missing: en.datetime.distance_in_words.less_than_x_minutes
What can I do to fix this?
Here is my gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails', '4.0.5'
gem 'pg', '0.17.1'
gem 'sass-rails', '~> 4.0.3'
gem 'coffee-rails', '~> 4.0.1'
gem 'uglifier', '>= 2.5.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'
gem "bootstrap-sass", "~> 3.1.1.1"
gem "will_paginate", "~> 3.0.5"
gem "bootstrap-will_paginate", "~> 0.0.10"
gem "redcarpet", "~> 3.1.1"
# 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.7'
group :development, :test do
gem "foreman", "~> 0.63.0"
gem 'annotate', '~> 2.6.3'
gem 'rspec-rails', '~> 2.14.2'
gem "guard-rspec", "~> 4.2.3", :require => false
gem "factory_girl_rails", "~> 4.4.0"
gem "guard-spork", "~> 1.5.1"
gem "spork-rails", "~> 4.0.0"
# gem 'spork-rails', github: 'sporkrb/spork-rails'
end
group :test do
gem 'rb-fsevent', '~> 0.9.4', :require => false
gem "growl", "~> 1.0.3"
# # Test gems for Linux
# gem 'rb-inotify', '0.8.8'
# gem 'libnotify', '0.5.9'
# # Test gems for Windows
# gem 'rb-fchange', '0.0.5'
# gem 'rb-notifu', '0.0.4'
# gem 'win32console', '1.3.0'
end
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
gem 'dotenv-rails'
# Use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.1.2'
# Use unicorn as the app server
gem 'unicorn', '~> 4.8.2'
gem 'unicorn-worker-killer', "~> 0.4.2"
# Authentication
gem "devise", "~> 3.2.4"
gem "cancan", "~> 1.6.10"
gem "geocoder", "~> 1.2.0"
gem "carrierwave", "~> 0.10.0"
gem "mini_magick", "~> 3.7.0"
gem "fog", "~> 1.22.0"
gem "unf", "~> 0.1.3" # for use with the fog gem
gem "validate_url", "~> 0.2.0"
gem 'psych', '~> 2.0.5'
gem 'paper_trail', '~> 3.0.1'
gem 'faraday', '~> 0.9.0'
# Use Capistrano for deployment
group :development do
gem "capistrano", "~> 3.2.1"
gem 'capistrano-rbenv', '~> 2.0'
gem "capistrano-bundler", "~> 1.1.0"
gem "capistrano-rails", "~> 1.1.0"
end
# Use debugger
# gem 'debugger', group: [:development, :test]
And here if my production.rb:
Example::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 = false
# 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
# For devise
config.action_mailer.default_url_options = { :host => 'example.com' }
end
I figured out the problem. i18n gem version 0.6.10 was yanked, but I was using that in my system. As soon as I rolled back to 0.6.9 everything worked fine.

config.consider_all_requests_local set to true without full trace

I'm working on a new app today this is my Gemfile :
source 'https://rubygems.org'
gem 'rails', '3.2.8'
# Static pages
gem 'high_voltage', '0.9.2'
# Dry Controller
gem 'coast'
# Light Views
gem 'slim'
gem 'formtastic'
# Uploading
gem 'paperclip'
# Authentication
gem 'devise'
gem 'cancan'
# Easing models
gem 'enumerize'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
end
group :test, :development do
gem 'sqlite3'
gem 'awesome_print'
# For slim genetaror instead default
gem 'slim-rails'
gem 'factory_girl_rails', '~> 4.0'
gem 'forgery'
end
gem 'jquery-rails'
And this an extract from my environment/development.rb :
config.cache_classes = false
config.whiny_nils = true
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
config.action_mailer.raise_delivery_errors = false
config.active_support.deprecation = :log
config.action_dispatch.best_standards_support = :builtin
config.active_record.mass_assignment_sanitizer = :strict
config.active_record.auto_explain_threshold_in_seconds = 0.5
config.assets.compress = false
config.assets.debug = true
Slim::Engine.set_default_options pretty: true, sort_attrs: false
When I go to a page with an error for example this one :
p
= #project.envelopedd
I get a 500 page error instead of the normal debug trace. Any idea to fix this ?
This is a "bug" in the Rails documentation. I got burned by this just now also. There is a PR open on the Rails repo to address the docs issue.
The TL;DR: is that you need to implement show_detailed_exceptions? instead of local_request?

Resources