Overwrite bootstrap variables

atm bootstrap is loaded via npm and compiled with gulp already in the subtheme. There are also other gulp dependencies there.

fyi I am loading like this:

/* IMPORTS */
$color-mode-type: media-query;
// functions
@import "../node_modules/bootstrap/scss/functions";
// variables
@import "../node_modules/bootstrap/scss/variables";
// @import "variables-dark";
@import "../node_modules/bootstrap/scss/variables-dark";
//@import "maps";
@import "../node_modules/bootstrap/scss/maps";
// mixins
@import "../node_modules/bootstrap/scss/mixins";
//@import "utilities";
@import "../node_modules/bootstrap/scss/utilities";

@import "../node_modules/bootstrap/scss/mixins/banner";
@include bsBanner("");

// Layout & components
// @import "root";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/progress";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/tooltip";
@import "../node_modules/bootstrap/scss/popover";
@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/spinners";
@import "../node_modules/bootstrap/scss/offcanvas";
@import "../node_modules/bootstrap/scss/placeholders";

// Helpers
@import "../node_modules/bootstrap/scss/helpers";

// Utilities
@import "../node_modules/bootstrap/scss/utilities/api";


// local variables
@import "variables";
// local mixins
@import "mixins";
// typography
@import "typography";
// fonts
@import "fonts";
// barrio
// @import "barrio";
@import "../../../contrib/bootstrap_barrio/scss/components/variables";
@import "../../../contrib/bootstrap_barrio/scss/components/mixins";
@import "../../../contrib/bootstrap_barrio/scss/components/affix";
@import "../../../contrib/bootstrap_barrio/scss/components/alerts";
// @import "../../../contrib/bootstrap_barrio/scss/components/book";
// @import "../../../contrib/bootstrap_barrio/scss/components/book-navigation";
@import "../../../contrib/bootstrap_barrio/scss/components/breadcrumb";
@import "../../../contrib/bootstrap_barrio/scss/components/comments";
@import "../../../contrib/bootstrap_barrio/scss/components/commerce";
@import "../../../contrib/bootstrap_barrio/scss/components/contextual";
@import "../../../contrib/bootstrap_barrio/scss/components/details";
@import "../../../contrib/bootstrap_barrio/scss/components/dropbutton.component";
@import "../../../contrib/bootstrap_barrio/scss/components/dropbutton";
@import "../../../contrib/bootstrap_barrio/scss/components/feed-icon";
@import "../../../contrib/bootstrap_barrio/scss/components/field";
@import "../../../contrib/bootstrap_barrio/scss/components/file";
@import "../../../contrib/bootstrap_barrio/scss/components/form";
// @import "../../../contrib/bootstrap_barrio/scss/components/header";
@import "../../../contrib/bootstrap_barrio/scss/components/help";
@import "../../../contrib/bootstrap_barrio/scss/components/icons";
@import "../../../contrib/bootstrap_barrio/scss/components/image-button";
@import "../../../contrib/bootstrap_barrio/scss/components/indented";
@import "../../../contrib/bootstrap_barrio/scss/components/item-list";
@import "../../../contrib/bootstrap_barrio/scss/components/list-group";
@import "../../../contrib/bootstrap_barrio/scss/components/media";
@import "../../../contrib/bootstrap_barrio/scss/components/node";
@import "../../../contrib/bootstrap_barrio/scss/components/node-preview";
@import "../../../contrib/bootstrap_barrio/scss/components/page";
@import "../../../contrib/bootstrap_barrio/scss/components/search-form";
@import "../../../contrib/bootstrap_barrio/scss/components/shortcut";
@import "../../../contrib/bootstrap_barrio/scss/components/sidebar";
@import "../../../contrib/bootstrap_barrio/scss/components/site-footer";
@import "../../../contrib/bootstrap_barrio/scss/components/skip-link";
@import "../../../contrib/bootstrap_barrio/scss/components/table";
@import "../../../contrib/bootstrap_barrio/scss/components/tabledrag";
@import "../../../contrib/bootstrap_barrio/scss/components/tableselect";
@import "../../../contrib/bootstrap_barrio/scss/components/tablesort";
@import "../../../contrib/bootstrap_barrio/scss/components/tablesort-indicator";
@import "../../../contrib/bootstrap_barrio/scss/components/tabs";
@import "../../../contrib/bootstrap_barrio/scss/components/textarea";
@import "../../../contrib/bootstrap_barrio/scss/components/ui-widget";
@import "../../../contrib/bootstrap_barrio/scss/components/ui-dialog";
@import "../../../contrib/bootstrap_barrio/scss/components/user";
@import "../../../contrib/bootstrap_barrio/scss/components/vertical-tabs.component";
@import "../../../contrib/bootstrap_barrio/scss/components/vertical-tabs";
@import "../../../contrib/bootstrap_barrio/scss/components/views";
// @import "../../../contrib/bootstrap_barrio/scss/components/webform";
//bootstrap
// @import "bootstrap";

//bootstrap grid
//bootstrap grid

// @import "../node_modules/bootstrap/scss/grid";
//material design bootstrap
//@import "../node_modules/mdbootstrap/scss/mdb-free.scss";
//@import url(font-awesome.min.css);
//components
@import "components/root";
@import "components/raindrops";
@import "components/spinner";
@import "components/node";
@import "components/navbar";
@import "components/field";

The benefit of this approach is that you can disable any scss that you don't need when compiling.

Also it loads teh following missing variables:

//missing variables
// $border-color: black;
// $border-width: 0;
// $spacer: 0;
// $input-height: 1rem;
// $orange: #ffac07;
// $gray-200: #222222;
// $gray-300: #333333;
// $gray-700: #777777;
// $black: #000;
// $list-group-item-padding-y: 1rem;
// $list-group-item-padding-x: .5rem;
// $line-height-base: 1.5;
// $line-height-sm: 1.5;
// $line-height-lg: 1.5;
// $headings-line-height: 1.5;
// $border-radius-lg: 1rem;
// $table-border-width: 1px;
// $table-border-color: black;
// $table-cell-padding-x: 1rem;
// $table-cell-padding-y: 1rem;

also make sure you add this to your variables file to make sure that your image path is set correctly:

$barrio_path_images: "../images/";

fyi, in theory you could set to load bootstrap from anywhere that it is installed, e.g. not just node_modules

with regard to gulp, I am not sure the error you are getting but make sure you run npm install first in your sub-theme before running gulp. 😉

@ruthverena75

The gulp error may be due to older version of gulp. Also check the node and npm version.
Also you may debug with making partly changes instead whole changes together.

Thank you all for your Support.
I really had some old npm and gulp version and for this a wrong bootstrap version loaded.