Error on bootstrap gem - css

I've been getting the following error after trying to install the bootstrap gem. I've followed the advice found elsewhere but it doesn't seem to be working. I definitely always remember to restart my server after bundle install but I'm still having trouble.
Showing /home/ubuntu/workspace/sample_app/app/views/static_pages/home.html.erb where line #13 raised:
File to import not found or unreadable: bootstrap-sprockets.
Gemfile:
source 'https://rubygems.org'
gem 'rails', '5.0.0'
gem 'bootstrap-sass', '3.3.6'
gem 'puma', '3.4.0'
gem 'uglifier', '3.0.0'
gem 'coffee-rails', '4.2.1'
gem 'jquery-rails', '4.1.1'
gem 'turbolinks', '5.0.0'
gem 'jbuilder', '2.4.1'
group :development, :test do
gem 'sqlite3', '1.3.11'
gem 'byebug', '9.0.0', platform: :mri
end
group :development do
gem 'web-console', '3.1.1'
gem 'listen', '3.0.8'
gem 'spring', '1.7.2'
gem 'spring-watcher-listen', '2.0.0'
end
group :test do
gem 'rails-controller-testing', '0.1.1'
gem 'minitest-reporters', '1.1.9'
gem 'guard', '2.13.0'
gem 'guard-minitest', '2.4.4'
end
group :production do
gem 'pg', '0.18.4'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
aplication.css.scss
*...
* It is generally better to create a new file per style scope.
*
*/
#import "bootstrap-sprockets";
#import "bootstrap";
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Thanks for any help!

Add the to the Gemfile the gem sass-rails:
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
Check the docs at https://github.com/twbs/bootstrap-sass#a-ruby-on-rails

Related

Bootstrap-sass and Bootstrap creating `Sass::UnitConversionError at / Incompatible units: 'rem' and 'px'.` error

I am trying to use both Spree (which uses bootstrap-sass) and Material Design Bootstrap (https://mdbootstrap.com/) in my Rails 5.2 app and the combination is creating some unfortunate errors.
Specifically, it's throwing up this error when I try to load any page:
Sass::UnitConversionError at /
Incompatible units: 'rem' and 'px'.
In looking up this error I see posts like this, this, and this which indicate that this is an error with using calc with a mix of rem and px. However, it's being called on the following line in vendor/assets/stylesheets/mdb/core/bootstrap/_variables.scss:
$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
And I have checked each of the corresponding variables and none of them involve px values.
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
and
$input-btn-line-height: $line-height-base !default;
and in turn
$line-height-base: 1.5 !default;
and finally
$input-btn-padding-y: .375rem !default;
My gemfile is currently like this:
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.0'
gem 'rails', '~> 5.2.1'
gem 'puma', '~> 3.11'
gem 'puma_worker_killer'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'jbuilder', '~> 2.5'
gem 'mini_magick', '~> 4.8.0'
gem 'devise'
gem 'bootsnap'
# gem 'bootstrap', '~> 4.2.1'
gem 'jquery-ui-rails'
gem 'sprockets-rails'
gem 'bootstrap-sass'
gem 'bcrypt', '~> 3.1.7'
gem 'friendly_id', '~> 5.2.0'
gem 'stripe'
gem 'figaro'
gem 'magnific-popup-rails', '~> 1.1.0'
gem 'simple_form'
gem 'acts-as-taggable-on', '~> 6.0' #must be this version for Rails5
gem 'aws-sdk' , '~> 3'
gem 'aws-sdk-s3', require: false
# gem 'simple_form_extension'
gem 'recaptcha', require: "recaptcha/rails"
gem 'font-awesome-rails'
gem 'font-awesome-sass'
gem 'font_awesome5_rails'
# gem 'trix-rails', require: 'trix'
gem 'rack-tracker'
gem 'high_voltage', '~> 3.1'
gem 'convertkit-ruby', require: 'convertkit'
gem 'dotenv-rails'
gem 'acts_as_list'
gem 'wysiwyg-rails'
gem 'will_paginate'
gem 'searchkick'
gem 'spree', '~> 3.7.0.rc1'
gem 'spree_gateway', '~> 3.4'
gem 'spree_remove_bs3', github: 'matthewkennedy/spree_remove_bs3'
gem 'spree_bs4', github: 'matthewkennedy/spree_bs4'
group :production do
gem 'pg', '~> 0.20.0'
end
group :development, :test do
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
gem 'pg', '~> 0.20.0'
end
group :development do
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
gem 'binding_of_caller'
gem 'better_errors'
gem 'pg', '~> 0.20.0'
end
group :test do
gem 'capybara', '>= 2.15', '< 4.0'
gem 'selenium-webdriver'
gem 'chromedriver-helper'
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
And I have the following imports/requires in my application.scss:
*= require magnific-popup
*= require jquery-ui
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import 'font_awesome5_webfont';
#import 'font_awesome5.css';
#import 'bootstrap-datetimepicker';
#import 'froala_editor.min';
#import 'froala_style.min';
#import 'font-awesome-sprockets';
#import 'font-awesome';
#import 'plugins/char_counter.min.css';
#import 'plugins/code_view.min.css';
#import 'plugins/colors.min.css';
#import 'plugins/fullscreen.min.css';
#import 'plugins/image_manager.min.css';
#import 'plugins/image.min.css';
#import 'plugins/line_breaker.min.css';
#import 'plugins/quick_insert.min.css';
#import 'plugins/special_characters.min.css';
#import 'plugins/table.min.css';
#import 'third_party/embedly.min.css';
#import 'third_party/spell_checker.min.css';
#import 'mdb/mdb';
Can anyone help me get this sass error under control? Until I get this fixed the app is completely unusable as the error is on every page.

Rails no longer compiles and serves up my application.scss file

I am using Rails 4.2.0 and all of a sudden my style tag in my application.html.erb layout doesn't render the application.css anymore.
In my layout I have:
<%= stylesheet_link_tag 'application', media: 'all' %>
Which produces this error:
Showing /****/app/views/layouts/application.html.erb where line #5 raised:
TypeError: undefined is not an object (evaluating 'processor.process')
(in /****/app/assets/stylesheets/application.scss)
Which line 5 is simply the stylesheet_link_tag above.
If it helps my Gem file looks like this:
gem 'rails', '~> 4.2.0'
gem 'mysql2'
gem 'sass-rails'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'bootstrap-sass'
gem 'bootstrap_form'
gem 'autoprefixer-rails'
gem 'bcrypt-ruby', :require => 'bcrypt'
gem 'lodash-rails'
gem 'angular-rails-templates'
gem 'mini_magick'
gem 'refile', require: ['refile/rails', 'refile/image_processing']
gem 'aws-sdk'
gem 'RedCloth'
gem 'sass-json-vars'
Removing the stylesheet_link_tag makes the application run fine. Keeping the tag but emptying the application.scss file does not.
Any ideas?
To fix the process error, add therubyracer to your Gemfile. Credit to this S.O. question.
gem 'therubyracer', platforms: :ruby
and to fix the Bootstrap glyphicons issue, import bootstrap-sprockets prior to importing Bootstrap or custom variables in your application.scss
#import 'bootstrap-sprockets';
For reference to missing icons, here is a nice snippet from the Bootstrap-sass README.

Surveyor gem breaks my css

I added the surveyor gem and but it breaks my css (built almost entirely with bootstrap). How to deal with this?
Without surveyor:
With surveyor:
Below is my gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
#ruby-gemset=railstutorial_rails_4_0
gem 'rails', '4.0.5'
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'
gem "paperclip", "3.5.3"
gem "aws-sdk"
gem 'whenever', :require => false
gem 'factory_girl_rails', '4.2.1'
gem 'd3-rails'
gem 'figaro'
gem 'rename'
group :development do
gem "letter_opener"
end
group :test do
gem 'selenium-webdriver', '2.35.1'
gem 'capybara', '2.1.0'
gem 'cucumber-rails', '1.4.0', :require => false
gem 'database_cleaner', github: 'bmabey/database_cleaner'
end
group :development, :test do
gem 'sqlite3', '1.3.8'
gem 'rspec-rails', '2.13.1'
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 'jquery-datetimepicker-rails'
gem 'jquery-turbolinks'
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'
gem 'newrelic_rpm'
end
The answer can be found here enter link description here. Basically surveyor_all.css in app/assets/stylesheets is overriding bootstrap somehow.
Just remove require_tree . and include your custom.css.scss manually. Even without the surveyor_all.css being included it seems like that surveys appear fine.

Bootstrap is not styling anything with Ruby on Rails

I am using Bootstrap for the first time and it is not styling anything. I have already applied the answers from Bootstrap is not styling anything
and still no luck.
I have #import "bootstrap"; in my stylesheet
I also have the appropriate gems in my Gemfile. Here it is:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.5'
# Use sqlite3 as the database for Active Record
group :development,:test do
gem 'sqlite3'
end
group :production do
gem 'pg'
end
gem 'autoprefixer-rails'
group :assets do
gem 'sass-rails', '~> 4.0.3'
# 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'
gem 'bootstrap-sass', '~> 3.2.0'
end
# 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
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring', group: :development
# 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]
1) Add
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
to application.rb (inside the class)
2) Add #import 'bootstrap'; to the top line of a new CSS file.
Rails 4 does not use an assets group in Gemfile, So remove that & then edit your application.css to include following:
#import "bootstrap-sprockets";
#import "bootstrap";
Note: "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
Now add require Bootstrap Javascripts in app/assets/javascripts/application.js:
//= require jquery
//= require bootstrap-sprockets

rspec-rails generator doesn't create spec/rails_helper.rb

I created new Rails app, then added gem 'rspec-rails' to Gemfile, bundle install-ed, and launched
rails g rspec:install
create .rspec
create spec
create spec/spec_helper.rb
Why it didn't create spec/rails_helper.rb ?
My Gemfile is being generated with new Rails aplication with empty lines and comments removed. I only added the last line to it.
source 'https://rubygems.org'
gem 'rails', '4.0.3'
gem 'sqlite3'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'
group :doc do
gem 'sdoc', require: false
end
gem 'rspec-rails'
rails_helper.rb is new to Rspec Rails 3.x. You may be running an earlier version. Check your Gemfile.lock or run bundle list | grep rspec-rails to see which version you're running.
I think it's because it needs to be in both :development and :test
It should be:
group :development, :test do
gem 'rspec-rails', '~> 6.0.0'
end

Resources