Rails 5 Bootstrap 4 how do I turn on bootstrap-variables - ruby-on-rails-5

Question

I have followed the bootstrap-rubygem setup directions. Everything works except when I try to access variables like $black and $white I get a Sass::SyntaxError of Undefined variable. I've been googling this for the past 4 hours. Is there something that I need to turn on? I used to do this successfully with rails 4.2 and bootstrap 3 years a couple years ago, but now I'm at a loss.
Gemfile
source 'https://rubygems.org'
git_source(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.2'
# Use mysql as the database for Active Record
gem 'mysql2', '>= 0.3.18', '< 0.5'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
gem 'slim-rails'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
gem 'jquery-rails'
gem 'sprockets-rails'
# Use CoffeeScript for .coffee assets and views
# gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
# gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '~> 2.13'
gem 'selenium-webdriver'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
# gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
application.scss
$body-bg: $black;
#import "bootstrap";
application.js
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .

Answer 1

I was able to get the variables working in my custom files by using the following manifest file
application.scss:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_self
*/
#import "bootstrap";
#import "custom";
As per the bootstrap gem instructions, I had to remove require_tree, but require_self seems to be ok.
With this in place, you have access to $text-muted or $brand-primary inside custom.scss.
Presumably you can define your custom colors in that file as well.
$body-bg: $black;
$body-color: $white;
Or better yet, define a _custom_variables.scss file and import that before your custom css files.
#import "bootstrap";
#import "custom_variables";
#import "custom";
If you want to redefine the bootstrap variables before bootstrap uses them, then use the order
#import "custom_variables";
#import "bootstrap";
#import "custom";
However, be aware that any custom bootstrap sass methods will blow up, (i.e. darken()) unless you import bootstrap first. So, you can't just import the entire bootstrap variables first. (tried and failed!)

Answer 2

From what I can tell the docs are wrong. If you have the application.scss like so:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
and put
#import bootstrap
at the top of the scss file you compose, you can make things work.
static_pages.sass:
// Place all the styles related to the static_pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
$body-bg: green
#import bootstrap
body > div > p
color: $red
all of that will work. Passing one variable into another though does not seem to work.
EDIT FOR CLARITY:
If you are using scss as the file extention for the static_pages css file the code css markup is a bit different.
// Place all the styles related to the static_pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
#import 'bootstrap';
// $red: #800000;
p {
color: $red;
}
If all else fails you can clone this app and it will work.

Answer 3

Figured it out. This is straight from the horse's mouth. You need to download the _bootstrap-variables.scss file from here and place it inside app/assets/stylesheets.
Uncomment the variables you want to use (e.g. $black, $white, etc.)
Then, application.scss should look like:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
#import "bootstrap-variables";
$body-bg: $black;
$body-color: $white;
#import "bootstrap";