2

我试图在我的 Rails 5.2 应用程序中同时使用Spree（使用bootstrap-sass）和 Material Design Bootstrap（https://mdbootstrap.com/），这种组合会产生一些不幸的错误。

具体来说，当我尝试加载任何页面时，它会抛出这个错误：

Sass::UnitConversionError at /
Incompatible units: 'rem' and 'px'.

在查找此错误时，我看到类似this、this和this的帖子，这表明将 calc 与 rem 和 px 混合使用时出现错误。但是，它在以下行中被调用vendor/assets/stylesheets/mdb/core/bootstrap/_variables.scss：

$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;

而且我已经检查了每个相应的变量，它们都没有涉及 px 值。

$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`

和

$input-btn-line-height: $line-height-base !default;

反过来

$line-height-base: 1.5 !default;

最后

$input-btn-padding-y: .375rem !default;

我的 gemfile 目前是这样的：

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]

我在我的中有以下导入/要求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';

谁能帮我控制这个 sass 错误？在我修复此问题之前，该应用程序完全无法使用，因为错误出现在每个页面上。

4

0 回答 0