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.
Related
I am trying to set up a solidus app with custom css using bootstrap-sass. (I am following this tutorial)
Prior to getting this error, the page would load just fine but none of the bootstrap css would load correctly. This error started after I added
#= require bootstrap_sprockets
#= require_tree
to my all.coffee file
and adding
gem 'sassc-rails'
to my Gemfile
the complete all.sass file:
#import "bootstrap-sprockets"
#import "bootstrap"
the complete all.coffee file:
#= require jquery
#= require jquery_ujs
#= require spree
#= require bootstrap_sprockets
#= require_tree
the complete 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.18'
# 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
gem 'bootstrap-sass'
gem 'sassc-rails'
gem 'solidus'
gem 'solidus_auth_devise'
gem 'deface'
# 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'
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]
when I run the server I get the following error:
Error: Function very-light finished without #return
on line 38:34 of ../../.rvm/gems/ruby-2.6.3/gems/solidus_backend-2.2.2/app/assets/stylesheets/spree/backend/globals/_variables.scss, in function `very-light`
from line 38:34 of ../../.rvm/gems/ruby-2.6.3/gems/solidus_backend-2.2.2/app/assets/stylesheets/spree/backend/globals/_variables.scss
from line 6:9 of ../../.rvm/gems/ruby-2.6.3/gems/solidus_backend-2.2.2/app/assets/stylesheets/spree/backend/spree_admin.scss
>> $color-border: very-light($color-3, 12) !default;
I'm not sure what exactly I need to do to fix this. I've made sure that I have the required gems for bootstrap-sass in my Gemfile and I've tried running bundle update.
the latest sassc-rails gem implemented via sassc, wich requires all CSS functions should ensure that they do not end without a #return statement.
and solidus fix it after v2.9, you can see it on https://github.com/solidusio/solidus/commit/aeba736e742eaf39e45b294433e33d663ac66f24
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.
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
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.
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