Ruby on Rails 6 Bootstrap undefined variable error on server restart - css

Question

I am having a problem in rails 6 where when i restart my server I get Error: Undefined variable. If I comment out any scss variables in my files, refresh the page, un-comment the variables and refresh again everything works fine and I am able to use variables in my CSS files again. Im not really sure why this is happening and any help anyone can offer would be really appreciated.
Here is my application.scss file:
/*
* 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 "custom_variables";
#import 'bootstrap/scss/bootstrap';
#import "#fortawesome/fontawesome-free/css/all.css";
#import 'layouts';
#import 'themes';
#import 'typography';
#import 'states';
and here are the files I am using variables in:
.dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
transition: all .3s;
}
#media only screen and (min-width: map_get($grid-breakpoints,"lg")) {
.dropdown:hover>.dropdown-menu {
visibility: visible;
opacity: 1;
}
}
#media only screen and (max-width: map_get($grid-breakpoints,"lg")) {
.dropdown-menu {
display: none;
}
}
.footer a:hover {
text-decoration: none;
}
.bg-dark-red {
background-color: $banner-color;
}
.navbar, .footer {
background-color: $navbar-bg-color;
a {
color: $navbar-color;
}
a:hover {
color: $navbar-hover-color;
}
.active {
color: $navbar-active-color;
}
}
.dropdown-menu {
background-color: $navbar-bg-color;
a {
color: $navbar-color;
}
a:hover {
color: $navbar-hover-color;
background-color: inherit;
}
.dropdown-divider {
border-top-color: $dropdown-border-color;
}
}
section.map {
background-color: $map-bg-color;
}
.btn-primary {
#include button-variant($primary-btn-color, darken($primary-btn-color, 7.5%), darken($primary-btn-color, 10%), lighten($primary-btn-color,5%), lighten($primary-btn-color, 10%), darken($primary-btn-color,30%));
}
Any suggestions on what I can do to stop this from occurring?
EDIT: I forgot to include the file where I am importing the variables, here it is:
$white: #fff;
$black: #000;
$primary-color: #FF0103;
$complementary-color: complement($primary-color);
$navbar-color: rgba($white, .55);
$navbar-bg-color: #343A40;
$navbar-hover-color: rgba($white, .75);
$dropdown-border-color: rgba($black, .15);
$navbar-active-color: $white;
$banner-color: $primary-color;
$primary-btn-color: #198754;
$map-bg-color: #E1E1E1;

Answer 1

I was also facing the same exact issue. It was so frustrating. First get rid of all the comments in the application.scss file especially the line that has *= require_self. Any file that uses bootstrap variables should have #import 'bootstrap/scss/bootstrap'; at the top. The following will NOT work:
application.scss:
#import 'bootstrap/scss/bootstrap';
#import 'custom.scss"
custom.css:
body {
background-color: $gray-200;
}
Instead move the line #import 'bootstrap/scss/bootstrap'; from application.scss to custome.scss, then it will work as shown below:
custom.scss:
#import 'bootstrap/scss/bootstrap';
body {
background-color: $gray-200;
}