Twitter Bootstrap Question posted in

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

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. 😀

:

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]
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search