I'm implementing Bootstrap 4.4 in a Rails 6 app using Webpacker and the theming isn't working in production.
I overrode some Bootstrap variables and put the custom theming in a separate file called bootstrap_variables.scss. I made sure to import Bootstrap's functions before the custom variables in the app/assets/stylesheets/application.scss file as outlined here and here.
@import "bootstrap/scss/functions";
@import "bootstrap_variables";
@import "bootstrap/scss/bootstrap";
When I run the app locally it works fine. When I try to push to production (Heroku) the build fails and I get the following error:
SassC::SyntaxError: Error: argument `$color` of `darken($color, $amount)` must be a color
on line 181:43 of app/assets/stylesheets/bootstrap_variables.scss, in function `darken`
from line 181:43 of app/assets/stylesheets/bootstrap_variables.scss
$link-hover-color: darken($link-color, 15%) !default;
That references the following lines in the custom bootstrap_variables.scss file:
$link-color: theme-color("primary") !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
Why might this be working locally but not in production?