Bootstrap - 구성

Bootstrap 5버전부터 IE를 지원하지 않는다.

설치

$ npm i bootstrap@5

구성

• 부트스트랩 기본 구성 scss
• 부트스트랩 sass 관련 구성
• 공통 컬러 수정시 variables.scss 보다 상단에 작성해야 기본값 대신 적용된다. ($primary: #FDC000)
  • variables.scss 내부엔 $primary: $blue !default; 처럼 작성되어 있다.
    !default 라는 키워드로 기본값을 지정할 수 있고 해당 변수에 사용자가 기본값 대신 다른 값을 지정할 수 있다.

$primary: #FDC000;

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

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

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

• $theme-colors 와 같이 맵 데이터로 구성되어 있으면
  부분적인 커스텀시 variables 파일보다 아래에 작성해줘야 하고,
  모두 커스텀 한다면 variables 파일보다 위에 작성해줘야 한다.
  • 부분적으로 커스텀했는데 variables 파일보다 위에 작성한다면 나머지 $success, $info, $warning 등의 변수를 찾지 못해 에러가 발생한다.