2

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.

Liz
  • 1,369
  • 2
  • 26
  • 61

0 Answers0