I am following Tuts+ tutorial on "Building a Polling Application in Rails". I have followed along with every foundational step to configure the app.
With the 'bootsrap-sass' gem installed, he simply adds the *= require bootstrap to the application.css file and instantly sees the changed results on his server. However, I receive the following error..
localhost:3000
Sprockets::FileNotFound in Polls#index
couldn't find file 'bootstrap'
(in /RAILS/tutspolls/app/assets/stylesheets/application.css:13)
Extracted source (around line #5):
<html>
<head>
3 <title>Tutspolls</title>
4 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
5 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
6 <%= csrf_meta_tags %>
</head>
This is what my files are looking like..
Gemfile.rb
source 'https://rubygems.org'
gem 'rails', '4.1.6'
gem 'sqlite3'
gem 'sass-rails', '~> 4.0.5'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'haml-rails'
gem 'pry-rails'
gem 'bootstrap-sass'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'spring', group: :development
group :test do
gem 'factory_girl_rails'
gem 'minitest-rails'
end
stylesheets/application.css
*= require bootstrap
*= require_tree .
*= require_self
*/
..and this was added to config/application.rb
config.sass.preferred_syntax = :sass
Through a google search as well as similar questions on Stackoverflow, I find similar issues with answers that are not working for me. My guess is that other it's a version issue or simply my lack of understanding between the asset pipeline and gem architecture.
According to readme you need:
1) Remove old application.css and create application.css.scss
2) In new application.css.scss include this lines:
#import "bootstrap-sprockets";
#import "bootstrap";
and #import "bootstrap-sprockets" must be imported before #import "bootstrap".
I see that you mentioned stylesheets/application.rb file. What's this? Why do you use sass syntax in .rb file? Why do you use *= instead of #import? Where's importing of bootstrap-sprockets? Why do you skip it?
After looking over the versions of Bootstrap, I realized the tutorial is slightly older, so I switched from the defaulted bootstrap-sass which is version '~> 3.2.0' to ~> 3.1.1 and it works great.
Apparently the latest version of bootstrap-sass does not support *= require bootstrap and rather uses the #import which is current in the readme file. With the earlier version, I do not need to use #import 'bootstrap-sprockets' when utilizing*=`.
Related
I am building a relatively new Rails 5 application. I've been using the bootsy gem and I've been experiencing a problem where the wysiwyg will not show on the page until after a page refresh. After playing around for a while, I discovered that if I removed turbolinks from my application.js, the wysiwyg appears first time ( without a page refresh ). Can anyone tell me how I should be requiring turbolinks into my application.js. Thanks in advance.
application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require bootsy
//= require turbolinks
//= require_tree .
application.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootsy";
#import "articles";
gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.0.0'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.15'
# 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.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-turbolinks'
# 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
gem 'simple_form'
gem 'bootstrap-sass'
gem 'bootsy'
I'm using simple_form in combination with bootsy so my form looks something like this:
<%= simple_form_for #article, url: action_path do |f| %>
<%= f.input :title %>
<%= f.input :body, label: "Article Body", as: :bootsy %>
<%= f.submit %>
<% end %>
You need to use the turbolinks:load event like this :
$(document).on('turbolinks:load', ready)
function ready() {
//your code here
}
Your require is fine.
That's it.
So after a bit of playing around I found a solution. I added document.addEventListener('turbolinks:load', Bootsy.init); to my application.js and this solved the issue.
Hello everyone I have installed bootstrap for my application, and it is not working out to well. Here is my application.scss file
#import "bootstrap-sprockets";
#import "bootstrap";
Here is my application.rb file:
<!DOCTYPE html>
<html>
<head>
<title>BootstrapApp</title>
<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true%>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
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 jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
Finally here is my Gem File:
source 'http://rubygems.org'
gem 'bootstrap-sass', '~> 3.3.5'
# 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'
# 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'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Here is what I am getting when trying to add a navbar to my webpage:
The problem is you're not requiring application.scss and application.js.
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true%>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
If you are getting the Object does not support the property or method error, then use the latest gem for "coffee-script-source" (like 1.10.0) - anything other than version 1.9.x.
Add the following line to Gemfile, run bundle install and restart the server.
gem 'coffee-script-source', '~> 1.11', '>= 1.11.1'
I finally got this to work. this link provided me with my solution. Thanks to everyone who helped me on this post, it was greatly appreciated and a great learning experience :)
I'm new to Rails, so have been following an online video tutorial building a project.
I've been trying to add Bootstrap, but even after
Adding the Gem,
Doing a bundle install,
Restarting the mysql server, and
Adding the scss #bootsrap import to the application.css.scss file,
It's still not pulling though to my index page.
Is there something I'm missing?
Here's my 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
*/
// Custom bootstrap variables must be set or imported before bootstrap itself.
#import "bootstrap-sprockets";
#import "bootstrap";
Here's my gem file:
source 'https://rubygems.org'
gem 'rails', '4.2.6'
gem 'sqlite3'
gem 'simple_form', '>= 3.2.1'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
group :development, :test do
gem 'byebug'
end
group :development do
gem 'web-console', '~> 2.0'
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Thanks!
Please add in your application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
And add in your application.css
#import "bootstrap-sprockets";
#import "bootstrap";
#import 'bootstrap/theme';
I am trying to install bootstrap into my application and am having all kinds of problems. I have pasted my gemfile, application.js and error codes. I am not sure what I am doing wrong here and any help would be greatly appreciated.
styles.css.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
gem file
source 'http://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.8'
# Use sqlite3 as the database for Active Record
group :development do
gem 'sqlite3'
gem 'capistrano'
end
group :production do
gem 'pg'
gem 'mysql2'
gem 'activerecord-mysql-adapter'
end
# Use SCSS for stylesheets
group :assets do
gem 'coffee-rails'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'sass-rails', '>= 3.2'
end
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
# 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
# Use debugger
# gem 'debugger', group: [:development, :test]
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]
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 vendor/assets/javascripts of plugins, if any, 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/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
this is my error
WARN: tilt autoloading 'sass' in a non thread-safe way; explicit require 'sass' suggested.
Completed 500 Internal Server Error in 722ms
ActionView::Template::Error (File to import not found or unreadable: bootstrap-sprockets.
Load paths:
C:/Sites/jeepjig/app/assets/images
C:/Sites/jeepjig/app/assets/javascripts
C:/Sites/jeepjig/app/assets/stylesheets
C:/Sites/jeepjig/vendor/assets/javascripts
C:/Sites/jeepjig/vendor/assets/stylesheets
C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/turbolinks-2.5.2/lib/assets/javascripts
C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/jquery-rails-3.1.2/vendor/assets/javascripts
(in C:/Sites/jeepjig/app/assets/stylesheets/styles.css.scss:2)):
3: <head>
4: <%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
5: <title>JeepJig</title>
6: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
7: <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
8: <%= csrf_meta_tags %>
9:
app/assets/stylesheets/styles.css.scss:2
app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb__1034748832_48995988'
Rendered C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/actionpack-4.1.8/lib/action_dispatch/middleware/templ
ates/rescues/_trace.html.erb (3.0ms)
Rendered C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/actionpack-4.1.8/lib/action_dispatch/middleware/templ
ates/rescues/_request_and_response.html.erb (2.0ms)
Rendered C:/RailsInstaller/Ruby2.1.0/lib/ruby/gems/2.1.0/gems/actionpack-4.1.8/lib/action_dispatch/middleware/templ
ates/rescues/template_error.html.erb within rescues/layout (53.0ms)
Update:
I removed
group :assets do
and now I am not longer getting the error.
I guess this was depreciated in R4
I found this link, quickly realized I was having the issue because I had installed the boostrap-sass, and done a bundled install without restarting the rails server.
I hope to provide this as a reminder for any others that find their way here and can't see why it's not working.
remove group :assets in Gemfile whereas specify like this
gem 'bootstrap-sass', :git => 'https://github.com/twbs/bootstrap-sass.git', :branch => 'next'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
gem 'autoprefixer-rails'
I am unable to get bootstrap to work in my layout, I can't seem to figure out why. I did rm app/assets/stylesheets/application.css
Any help would be much appreciated.
Gemfile
source 'https://rubygems.org'
ruby '2.1.2'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0.beta2'
# Use postgresql as the database for Active Record
gem 'pg'
gem 'rails_12factor', group: :production
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0.0.beta1'
# 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
gem 'jquery-rails', '~> 4.0.0.beta2'
# 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 'debugger' anywhere in the code to stop execution and get a debugger console
gem 'pry-rails'
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0.0.beta4'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
app/assets/stylesheets/custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>THE BLOGGER</title>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<nav>
<ul class="nav navbar-nav pull-right"></ul>
</nav>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
You should not remove the application.css manifest file. You should, however, change it's name to application.css.scss. This way it can be preprocessed by SASS.
If you are including the imports for bootstrap in a separate file as you do in your example (custom.css.scss), you must ensure that this file are included in the application manifest. The require_tree directive that is included by default does this (you need to have the file located in the /stylesheets directory, like you do):
#application.css or application.css.scss
*= require_tree .
However, since you are using SCSS, I recommend the following approach:
#application.css.scss
#...
#all your files and directives
#...
#import "bootstrap-sprockets";
#import "bootstrap";
This way, it is not necessary to have a separate file like custom.css.scss