CODEWITHSUNDEEP
cssruby-on-railsrubytwitter-bootstraprubygems
user3151052
user3151052

Reputation: 5

rails 5.2.0, sass-rails 5.0.7, bootstrap 4.3.1 Can't access bootstrap variables within .scss files

I was having trouble with one of my Ruby on Rails projects when I tried to upgrade from bootstrap 3. I removed the bootstrap-sass gem and followed the instructions on this github page, but whenever I requested a page from the server, I got an error about undefined variables for colors.

I made a new rails project, with the sole purpose to get bootstrap 4 working.

My 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;
}

When I navigate to a page with an h1 element I get the following error message

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

If I change the color in custom.scss to $red then the page loads perfectly, and I only get the error above if I remove the bootstrap imports, so some color imports are happening, while others are being ignored.

What do I need to do differently with bootstrap 4?

Upvotes: 0

Views: 620

Answers (1)

nuaky
nuaky

Reputation: 2086

Maybe variables are different in Bootstrap 3 and 4?

You can check this file: https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss . There is no $gray; color variable. There are different shades of gray:

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

Upvotes: 1

Related Questions