Bootstrap(부트스트랩) color customize(색상 변경) | protect-me

Bootstrap color customize(부트스트랩 색상 변경)
1. 단독 색상 변경
2. 전체 색상 변경
3. 사용자 색상 추가


단독 색상 변경

Bootstrap sass에 default map이 존재하는데,
사용자 변수를 생성하여 덮어씀.

🔍 사용자 변수가 @import ... bootstrap보다 위에 위치해야 함.
반대의 경우, 변수의 값이 업데이트 되지 않은 상태이기 때문에 새 값이 적용되지 않기 때문.

  • main.scss 코드 추가
$primary: chocolate;
$danger: tomato;
@import "../node_modules/bootstrap//scss/bootstrap";

전체 색상 변경

default 색상을 전체 변경할 경우 아래와 같이 적용이 가능함.

$theme-colors: (
  "primary":    red,
  "secondary":  red,
  "success":    red,
  "info":       red,
  "warning":    red,
  "danger":     red,
  "light":      red,
  "dark":       red
);

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

기존의 색상을 하나라도 남기고 싶을 경우,
default 값을 가져오기 위해 import 한 후에 색상 수정

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: (
  "primary":    red,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);
@import "../node_modules/bootstrap//scss/bootstrap";

사용자 색상 추가

custom-colors를 생성하고 Bootstrap default color map 변수에 Merge

// 사용자 변수를 생성(map type)
$custom-colors: (
  "custom-color": #900
);
// merge
$theme-colors: map-merge($theme-colors, $custom-colors);





  • 2021.04.23 - 최초 작성

댓글 환영 질문 환영
by.protect-me

좋은 웹페이지 즐겨찾기