$theme-colorsMap의 기존 색상을 수정하려면 사용자 정의 Sass 파일에 다음을 추가하십시오.

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

추가하려면

$theme-colors: (
  "custom-color": #900
);

삭제하려면

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
 
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
 
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

부트스트랩은 우리가 직접 사용하고 확장할 때 Sass 맵 내에 특정 키가 있다고 가정합니다. 포함된 맵을 사용자 정의할 때 특정 Sass 맵의 키가 사용되는 경우 오류가 발생할 수 있습니다.

예를 들어, 우리는 사용 primary, success및 danger에서 키를 $theme-colors링크, 버튼 및 양식 상태에 대한. 이러한 키의 값을 교체하면 문제가 없지만 제거하면 Sass 컴파일 문제가 발생할 수 있습니다. 이러한 경우 해당 값을 사용하는 Sass 코드를 수정해야 합니다.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);
 
  @return mix($color-base, $color, $level * $theme-color-interval);
}

.custom-element {
  color: theme-color-level(primary, -10);
}

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

$border-radius: .25rem;
$border-width: 1px;
 
.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}
 
.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

$border-radius: .25rem;
$border-width: 0;
 
.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}
 
.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}