Bootstrap 커스터마이징

Bootstrap Custimoize
Bootstrap Custimoize-Sass

1 Customize - color

Bootstrap의 컴포넌트 색을 커스터마이징하려면 아래에 나와있는 `SCSS의 map의 문법으로 지정되어 있는 형식을 변경해야 합니다. 이를 위해서는 SCSS 내에 @import를 통해 Bootstrap 폴더 내에 있는 여러 파일을 가져와야 합니다.

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

2 파일가져오기 및 작성하기

프로젝트 폴더 내에 있는 SCSS 파일로 이동하여 @import로 필요한 파일들을 가져옵니다. 가져온 파일들은 기존에 전체코드를 import한 파일 상단에 삽입해줍니다.

main.scss

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

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

// Default variable overrides
$body-bg: #000;
$body-color: #111;

3 theme-colors

@import로 명시해준 후, variables로 지정되어 있는 theme-colors를 아래에 코딩해줍니다.

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

$theme-colors: (
  "primary":    $primary,
  "secondary":  yellowgreen, // 원하는 색상으로 수정
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

//전체 파일 불러오기
@import "../node_modules/bootstrap/scss/bootstrap";

개발서버를 오픈해 확인해보면 지정한 색상으로 변한 것을 확인할 수 있습니다.