Блог

У меня возникли проблемы с одним из моих проектов Ruby on Rails, когда я попытался перейти с bootstrap 3. Я удалил драгоценный камень bootstrap-sass и следовал инструкциям на этой странице github, но всякий раз, когда я запрашивал страницу с сервера, я получал сообщение об ошибке о неопределенных переменных для цветов.

Я создал новый проект rails с единственной целью заставить bootstrap 4 работать.

Мой Gemfile:

 source 'https://rubygems.org'

gem 'rails'       
gem 'puma'        
gem 'sass-rails' 
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'   
gem 'jbuilder'   
gem 'bootsnap'
gem 'bootstrap', '~> 4.3.1'

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
  

application.scss

 @import "bootstrap";
@import "custom";
  

application.js

 //= require jquery3
//= require popper
//= require bootstrap
//= require_tree .
  

custom.scss

 @import "bootstrap";

h1 {
    color: $gray;
}
  

Когда я перехожу на страницу с элементом h1, я получаю следующее сообщение об ошибке

 Error: Undefined variable: "$gray".
        on line 4 of app/assets/stylesheets/custom.scss
        from line 2 of app/assets/stylesheets/application.scss
>>     color: $gray;
  

Если я изменю цвет в custom.scss на $ red, то страница загрузится идеально, и я получу ошибку, указанную выше, только если я удалю импорт начальной загрузки, поэтому происходит импорт некоторых цветов, в то время как другие игнорируются.

Что мне нужно сделать по-другому с bootstrap 4?

Может быть, переменные разные в Bootstrap 3 и 4?

Вы можете проверить этот файл: https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss . $gray; Переменной color нет. Существуют разные оттенки серого:

 $gray-100: #f8f9fa !defau<
$gray-200: #e9ecef !defau<
$gray-300: #dee2e6 !defau<
$gray-400: #ced4da !defau<
$gray-500: #adb5bd !defau<
$gray-600: #6c757d !defau<
$gray-700: #495057 !defau<
$gray-800: #343a40 !defau<
$gray-900: #212529 !defau<