I usually go a couple steps further, which is to fully copy the bootstrap.scss main file as well as variables.scss ... I'll update the bootstrap.scss copy to point to the local variables... I've done mixins in the past but never actually found myself changing existing ones. I'll include my own mixins that references the original.
In this way, I have...
/styles/root.scss
includes bootstrap.scss
/styles/bootstrap.scss
references local vars and mixins, rest from bootstrap
/styles/_variables.scss
copy of bootstrap variables
/styles/_mixins.scss
reference bootstrap's mixins
root is included at the top of the project... Other components will have a .scss next to the component that may include variables and/or mixins as needed.
This way I can have my globals, and what I need inline. Beyond all of this, it's easier to comment out parts of bootstrap I'm not using. As to copying variables.scss, this is because I sometimes find it hard to remember what should/can be replaced. I also will usually adjust the font bases, as well as some of the colors and styling choices in variables directly.
In the end it's a much cleaner codebase.
I usually go a couple steps further, which is to fully copy the bootstrap.scss main file as well as variables.scss ... I'll update the bootstrap.scss copy to point to the local variables... I've done mixins in the past but never actually found myself changing existing ones. I'll include my own mixins that references the original. In this way, I have... /styles/root.scss includes bootstrap.scss /styles/bootstrap.scss references local vars and mixins, rest from bootstrap /styles/_variables.scss copy of bootstrap variables /styles/_mixins.scss reference bootstrap's mixins root is included at the top of the project... Other components will have a .scss next to the component that may include variables and/or mixins as needed. This way I can have my globals, and what I need inline. Beyond all of this, it's easier to comment out parts of bootstrap I'm not using. As to copying variables.scss, this is because I sometimes find it hard to remember what should/can be replaced. I also will usually adjust the font bases, as well as some of the colors and styling choices in variables directly. In the end it's a much cleaner codebase.