Cant change bootstrap variables

I should be able to update bootstrap core varibales in my custom-varibles.scss file. I can change mdb variables in this file.

No variables from boostrap there are no errors from gulp it compiles but variables are not changed. changes made to mdb variables do. I have tried importing custom_varibales.scss before boostrap core but still does not override variables.

Resources (screenshots, code snippets etc.) mdb.scss file @charset "UTF-8";

@import "custom-variables";

// Bootstrap @import "core/bootstrap/functions"; @import "core/bootstrap/variables"; @import "core/bootstrap/rfs";

// CORE

@import "core/mixins";

// Your custom variables

@import "core/colors"; @import "core/variables"; @import "core/global"; @import "core/helpers"; @import "core/typography"; @import "core/masks"; @import "core/waves";

// FREE @import "free/animations-basic"; @import "free/modules/animations-extended/module"; @import "free/buttons"; @import "free/cards"; @import "free/dropdowns"; @import "free/input-group"; @import "free/navbars"; @import "free/pagination"; @import "free/badges"; @import "free/modals"; @import "free/carousels"; @import "free/forms"; @import "free/msc"; @import "free/footers"; @import "free/list-group"; @import "free/tables"; @import "free/depreciated"; @import "free/steppers"; @import "free/loader"; @import "free/treeview"; // Free addons // @import "addons/datatables"; // @import "addons/datatables-select"; // @import "addons/directives"; // @import "addons/hierarchical-display"; // @import "addons/flags"; // @import "addons/rating";

// Your custom styles @import "custom-styles";

I am using gulp to compile