Joris Vanhecke

Overwriting Bootstrap 5 variables using bootstrap gem in Rails 7

This just cost me a few hours to figure out so posting in case someone hits the same issue...

When using the Bootstrap Ruby Gem with Rails 7 you might want to override the default Bootstrap variables to add your own flavor. According to all the readmes you should first set your own variable values and then import the bootstrap library. Bootstrap uses !default annotations which means that they do not override previously set variables.

For some reason, the following application.scss did not work on all our machines (it did work on some) when using the Bootstrap gem with Rails 7:

$red: #c0523a;
$white: #fff;
$green: #5cb85c;

$theme-colors: (
        "primary": $red,
        "secondary": $green,
        "info": #0dcaf0,
        "success": #F0B671,
        "warning": #ffc107,
        "dark": #212529,
        "danger": #BD7259,
        "light": $white,
);
@import "bootstrap";

The trick that worked for us is to import each individual bootstrap component from the application.scss.

You can do this by copy pasting the bootstrap-rubygem/assets/stylesheets/_bootstrap.scss file.

Working example:

$red: #c0523a;
$white: #fff;
$green: #5cb85c;

$theme-colors: (
        "primary": $red,
        "secondary": $green,
        "info": #0dcaf0,
        "success": #F0B671,
        "warning": #ffc107,
        "dark": #212529,
        "danger": #BD7259,
        "light": $white,
);

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/utilities";
@import "bootstrap/root";
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
@import "bootstrap/containers";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
@import "bootstrap/transitions";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
@import "bootstrap/accordion";
@import "bootstrap/breadcrumb";
@import "bootstrap/pagination";
@import "bootstrap/badge";
@import "bootstrap/alert";
@import "bootstrap/progress";
@import "bootstrap/list-group";
@import "bootstrap/close";
@import "bootstrap/toasts";
@import "bootstrap/modal";
@import "bootstrap/tooltip";
@import "bootstrap/popover";
@import "bootstrap/carousel";
@import "bootstrap/spinners";
@import "bootstrap/offcanvas";
@import "bootstrap/placeholders";
@import "bootstrap/helpers";
@import "bootstrap/utilities/api";

#ruby