0

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.

enter image description here

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?

enter image description here

Jelle Stekelenburg
  • 154
  • 1
  • 11

1 Answers1

1

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;
    }
}
IT goldman
  • 14,885
  • 2
  • 14
  • 28
  • You're right, this works. Which in my opinion is very weird because css normally reads from top to bottom and the last change (loading in later) will overwrite the styling that was loaded before. Now I know that with variables it is the other way around. Thanks for your help! – Jelle Stekelenburg Sep 14 '22 at 07:32