How to fix Error : "Sass::SyntaxError in Posts#index" in Ruby on Rails?

Question

I was trying to add bootstrap to my Rails app reading a tutorial, and I got the error below. Please explain what happened, and please do edit my code to show how to fix. And any resources on Rails which you would refer to get better at it will be appreciated. P.s. I'm just starting. Thank you for the read. :D

:

Page: http//localhost:3000/posts

Error:

Sass::SyntaxError in Posts#index

File to import not found or unreadable: bootstrap. Load paths:
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/app/assets/config /Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/app/assets/images /Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/app/assets/javascripts
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/app/assets/stylesheets
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/vendor/assets/javascripts
/Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training/vendor/assets/stylesheets
/Users/mac/.rvm/gems/ruby-2.3.0/gems/jquery-rails-4.2.1/vendor/assets/javascripts /Users/mac/.rvm/gems/ruby-2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts /Users/mac/.rvm/gems/ruby-2.3.0/gems/actioncable-5.0.0.1/lib/assets/compiled /Users/mac/.rvm/gems/ruby-2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts

Extracted source (around line #5):


// @import "bootstrap-responsive";

@import "bootstrap";
@import "bootstrap-responsive";

// body {

Rails.root: /Users/mac/Documents/Projects/Web Development/Ruby On Rails/Jump Start Rails/training

Application Trace | Framework Trace | Full Trace app/assets/stylesheets/custom.css.scss:5 app/views/layouts/application.html.erb:7:in `_app_views_layouts_application_html_erb___3077022213198936014_70226475759060' Request

Parameters:

None

Toggle session dump Toggle env dump Response

Headers:

None

Git Repo of files : https://github.com/ScarletMcLearn/training

The code of "application.html.erb" file (If required):

<!DOCTYPE html>
<html>
  <head>
    <title>Training</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

The code of application.js file (if needed):

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery

// = require bootstrap-sprockets

//= require jquery_ujs
//= require turbolinks
//= require_tree .


//= require bootstrap

The contents of the Gemfile:

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'


# 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', platform: :mri
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

My "application.css" file :

/*
 * 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

My "custom.css.scss" file:

// @import "bootstrap";

// @import "bootstrap-responsive";

//=reqire_self

@import "bootstrap";
@import "bootstrap-responsive";

// body {
//     padding-top: 60px;
//     padding-bottom: 40px
// }
// .sidebar-nav {
//     padding: 9px 0;
// }


body {
    padding-top: 60px;
    padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}

My 'application.js' file:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery

// = require bootstrap-sprockets

//= require jquery_ujs
//= require turbolinks
//= require_tree .


//= require twitter/bootstrap

My Gemfile:

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'

gem 'sass-rails', '~> 5.0'

gem 'twitter-bootstrap-rails'

# 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', platform: :mri
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Sounds silly but have you tried stopping and restarting the server? — GhostRider
– GhostRider, Commented Sep 12, 2016 at 16:50
:p No I hadn't. But I tried it just now, but no avail. :( @GhostRider Do give some update. — Scarlet McLearn
– Scarlet McLearn, Commented Sep 12, 2016 at 17:09
are you able to upload a repo to github? This sounds like one of those funky issues... — stephenmurdoch
– stephenmurdoch, Commented Sep 12, 2016 at 17:29
I dont know bout it. Should I? If yes, how do I do it? Keywords will do. I'll do it myself. :p :D — Scarlet McLearn
– Scarlet McLearn, Commented Sep 12, 2016 at 17:33
@ScarletMcLearn here's a guide: guides.railsgirls.com/github :) — stephenmurdoch
– stephenmurdoch, Commented Sep 12, 2016 at 17:37

Dharam Gollapudi · Accepted Answer · 2016-09-12 16:56:13Z

1

Did you add the following to your Gemfile and run bundle install after that?

gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'

rails uses sprockets framework in order to pre-process assets, which includes stylesheets, javascripts and images. While pre-processing, when it encounters @import "bootstrap";, it traverses through the asset path directories in order to find the imported bootstrap directory or file. Based on the error you are encountering, looks like the sprockets engine is not able to find the bootstrap.

Make sure you have included the bootstrap-sass in your Gemfile and run bundle install to see if the error goes away.

answered Sep 12, 2016 at 16:56

Dharam Gollapudi

6,4382 gold badges36 silver badges43 bronze badges

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

3 Comments

Scarlet McLearn Over a year ago

I had those added. I edited and added the Gemfile. I added those before and also ran bundle install, and got this error. Do suggest.

Dharam Gollapudi Over a year ago

Looks like you have spring defined in Gemfile. Make sure you stop it using bundle exec spring stop in order for your changes to the Gemfile picked up before restarting the server.

Scarlet McLearn Over a year ago

I ran this command in my Terminal, also restarted my server. Its still the same. @Dharam :(

luissimo · Accepted Answer · 2016-09-12 17:10:52Z

0

Do this:

application.css.scss

/*
 * 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_self
 */

application.css

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. 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_tree .
*/

Application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks

In that specific order!

Gemfile.rb

gem 'sass-rails', '~> 5.0'
gem 'twitter-bootstrap-rails'

Make sure you have these 2 gems in your gemfile, outside of any groups. Then run bundle install

answered Sep 12, 2016 at 17:10

luissimo

9782 gold badges11 silver badges33 bronze badges

3 Comments

Scarlet McLearn Over a year ago

I did those before. Uploaded the codes as well. But still same problem.

luissimo Over a year ago

Have you tried removing; import "bootstrap"; import "bootstrap-responsive"; and '// = require bootstrap-sprockets'

Scarlet McLearn Over a year ago

Yes. I just did. But no change. :< @luissimo

Collectives™ on Stack Overflow

How to fix Error : "Sass::SyntaxError in Posts#index" in Ruby on Rails?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related