CSS not rendering in Ruby on Rails

Question

I'm currently working through Chapter 5 of Michael Hartl's tutorial.

So the home page of my app currently looks like this

(https://softcover.s3.amazonaws.com/636/ruby_on_rails_tutorial/images/figures/layout_no_logo_or_custom_css_bootstrap_rails_4.png)

But it should look like this

(https://softcover.s3.amazonaws.com/636/ruby_on_rails_tutorial/images/figures/sample_app_only_bootstrap_4_0.png)

I updated my config/app file and added a custom css.scss file, but the CSS is not rendering as expected.

Here is my gemfile

source 'https://rubygems.org'
ruby '2.0.0'
#ruby-gemset=railstutorial_rails_4_0

gem 'rails', '4.0.8'
gem 'bootstrap-sass', '2.3.2.0'
gem 'sprockets', '2.11.0'
gem 'bcrypt-ruby', '3.1.2'
gem 'faker', '1.1.2'
gem 'will_paginate', '3.0.4'
gem 'bootstrap-will_paginate', '0.0.9'

group :development, :test do
  gem 'sqlite3', '1.3.8'
  gem 'rspec-rails', '2.13.1'
  # The following optional lines are part of the advanced setup.
  # gem 'guard-rspec', '2.5.0'
  # gem 'spork-rails', '4.0.0'
  # gem 'guard-spork', '1.5.0'
  # gem 'childprocess', '0.3.6'
end

group :test do
  gem 'selenium-webdriver', '2.35.1'
  gem 'capybara', '2.1.0'
  gem 'factory_girl_rails', '4.2.0'
  gem 'cucumber-rails', '1.4.0', :require => false
  gem 'database_cleaner', github: 'bmabey/database_cleaner'

  # Uncomment this line on OS X.
  # gem 'growl', '1.0.3'

  # Uncomment these lines on Linux.
  # gem 'libnotify', '0.8.0'

  # Uncomment these lines on Windows.
gem 'rb-notifu', '0.0.4'
gem 'wdm', '0.1.0'
end

gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'

group :doc do
  gem 'sdoc', '0.3.20', require: false
end

group :production do
  gem 'pg', '0.15.1'
  gem 'rails_12factor', '0.0.2'
end

config/application.rb file ... I added config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif), this may have caused the problem

require File.expand_path('../boot', __FILE__)

# Pick the frameworks you want:
require "active_record/railtie"
require "action_controller/railtie"
require "action_mailer/railtie"
require "sprockets/railtie"
# require "rails/test_unit/railtie"

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module SampleApp
  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
    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
  end
end

app/assets/stylesheets/custom.css.scss

@import "bootstrap";

Why are you adding this to the precompilation, it's already included by default. And how and where are you including this custom.css.scss file? That is probably the one that is missing from precompilation. — Eyeslandic
– Eyeslandic, Commented Jul 12, 2014 at 22:56
If I'm reading the tutorial correctly, the custom.css.scss file should be automatically included as a part of application.css file that is included in the site layout. so do you suggest that I remove the line "config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)"? — user3808138
– user3808138, Commented Jul 12, 2014 at 23:03
You don't need to add custom.css.scss to precompilation if it isn't being used as a standalone file. Yeah, this line is not needed. — Eyeslandic
– Eyeslandic, Commented Jul 12, 2014 at 23:04
Are you running in production or development mode by the way? — Eyeslandic
– Eyeslandic, Commented Jul 12, 2014 at 23:05
I'm not sure, how can I check that? I'm pretty new to rails. — user3808138
– user3808138, Commented Jul 12, 2014 at 23:10

1andsock · Accepted Answer · 2014-07-13 01:33:11Z

1

The most likely cause is you aren't referencing the custom.css.scss in your application.css file. Make sure your application.css file looks like:

/*
 *= require_self
 *= require_tree .
*/

Another idea is to instead rename application.css to application.scss and then I'd do something like:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";

and then you could take out the @import "bootstrap" from the custom.css.scss

edited Jul 13, 2014 at 1:33

answered Jul 13, 2014 at 1:26

1andsock

1,56710 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3808138 Over a year ago

Thank you! I used your suggestion for the application.css file (which I had to create myself, it was missing). Do you generally have to create your own application.css file?

user3808138 Over a year ago

Another question, which file/code is responsible for the change from the first webpage and the one? Is it the custom.css.scss file?

1andsock Over a year ago

@user3808138, application.css is created by default when you create a rails app, so I'm not sure why yours was missing.

1andsock Over a year ago

@user3808138, Rails by default combines all the styles defined in application.css each time you visit a webpage. Before, you didn't have custom.css.scss referenced, so you were loading no styles. With the new code, your loading bootstrap's styles, and all the styles you defined in custom.css.scss.

Collectives™ on Stack Overflow

CSS not rendering in Ruby on Rails

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related