How do you customize mixin and then import bootstrap?

[jsphkm]

Is there a guidance on how to customize a mixin?

I'm specifically looking at _alert.scss, and if I am interested in changing the color for .alert-link, do I need to copy and paste that mixin into my custom.scss with my customization before the import statements? of course with that approach, I would need to omit from importing _alert.scss as well. If so, then I need some clarification on how to import.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  hr {
    border-top-color: darken($border, 5%);
  }

  .alert-link {
    color: darken($color, 10%);
  }
}

The only way I can figure out how to set up the import statements is like this:

// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
// Vendor
@import "../node_modules/bootstrap/scss/vendor/rfs";

// Deprecate
@import "../node_modules/bootstrap/scss/mixins/deprecate";

// Utilities
@import "../node_modules/bootstrap/scss/mixins/breakpoints";
@import "../node_modules/bootstrap/scss/mixins/hover";
@import "../node_modules/bootstrap/scss/mixins/image";
@import "../node_modules/bootstrap/scss/mixins/badge";
@import "../node_modules/bootstrap/scss/mixins/resize";
@import "../node_modules/bootstrap/scss/mixins/screen-reader";
@import "../node_modules/bootstrap/scss/mixins/size";
@import "../node_modules/bootstrap/scss/mixins/reset-text";
@import "../node_modules/bootstrap/scss/mixins/text-emphasis";
@import "../node_modules/bootstrap/scss/mixins/text-hide";
@import "../node_modules/bootstrap/scss/mixins/text-truncate";
@import "../node_modules/bootstrap/scss/mixins/visibility";

// Components
// @import "../node_modules/bootstrap/scss/mixins/alert";
@import "../node_modules/bootstrap/scss/mixins/buttons";
@import "../node_modules/bootstrap/scss/mixins/caret";
@import "../node_modules/bootstrap/scss/mixins/pagination";
@import "../node_modules/bootstrap/scss/mixins/lists";
@import "../node_modules/bootstrap/scss/mixins/list-group";
@import "../node_modules/bootstrap/scss/mixins/nav-divider";
@import "../node_modules/bootstrap/scss/mixins/forms";
@import "../node_modules/bootstrap/scss/mixins/table-row";

// Skins
@import "../node_modules/bootstrap/scss/mixins/background-variant";
@import "../node_modules/bootstrap/scss/mixins/border-radius";
@import "../node_modules/bootstrap/scss/mixins/box-shadow";
@import "../node_modules/bootstrap/scss/mixins/gradients";
@import "../node_modules/bootstrap/scss/mixins/transition";

// Layout
@import "../node_modules/bootstrap/scss/mixins/clearfix";
@import "../node_modules/bootstrap/scss/mixins/grid-framework";
@import "../node_modules/bootstrap/scss/mixins/grid";
@import "../node_modules/bootstrap/scss/mixins/float";


// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc...