title: rails 5.2.0, sass-rails 5.0.7, bootstrap 4.3.1 Can't access bootstrap variables within .scss files
body: <p>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 <a href="https://github.com/twbs/bootstrap-rubygem" rel="nofollow noreferrer">this github page</a>, but whenever I requested a page from the server, I got an error about undefined variables for colors.</p>
  
  <p>I made a new rails project, with the sole purpose to get bootstrap 4 working.</p>
  
  <p>My Gemfile:</p>
  
  <pre><code>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', '~&gt; 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]
  </code></pre>
  
  <p>application.scss</p>
  
  <pre><code>@import "bootstrap";
  @import "custom";
  </code></pre>
  
  <p>application.js</p>
  
  <pre><code>//= require jquery3
  //= require popper
  //= require bootstrap
  //= require_tree .
  </code></pre>
  
  <p>custom.scss</p>
  
  <pre><code>@import "bootstrap";
  
  h1 {
      color: $gray;
  }
  </code></pre>
  
  <p>When I navigate to a page with an h1 element I get the following error message</p>
  
  <pre><code>Error: Undefined variable: "$gray".
          on line 4 of app/assets/stylesheets/custom.scss
          from line 2 of app/assets/stylesheets/application.scss
  &gt;&gt;     color: $gray;
  </code></pre>
  
  <p>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.</p>
  
  <p>What do I need to do differently with bootstrap 4?</p>