[FIXED] How to change variable in bootstrap via app.scss

Issue

Currently I'm building a template that will be used by multiple people on different projects. So making this work instantly without changing things per project install is crutial.

For this instance I want to change the $spacer variable that is used for all the margings and paddings classes that Bootstrap offers. But I cant seem to figure out how to change the $spacer variable outside of the /node_modules. I have an own _variables.scss that creates variables for the theme but an !important or anything else wont work eventhough the custom _variables.scss is loaded later that the bootstrap from the node modules.

Is there a way to send a scss file to the node_modules file so it changes the variables from within? or is there a different way to overwrite a variable from the node modules?

Solution

I always work like this and no problem:

// File: my-bootstrap-and-styles.scss

// your overrides
$primary : #FEBC35;

// include bootstrap.scss
@import "../node_modules/bootstrap/scss/bootstrap";   

// Then add your additional custom code here
.my-primary-div {
  background: $primary;
  border: 1px solid black;
}

// also don't forget to take advantage
// of bootstrap's variables and mixins
@include media-breakpoint-down(md) {
    .my-class {
        overflow-y: auto;
    }
}

Answered By - IT goldman

Answer Checked By - Cary Denson (PHPFixing Admin)