Bootstrap - 구성
Bootstrap
5버전부터 IE
를 지원하지 않는다.
설치
$ npm i bootstrap@5
구성
- 부트스트랩 기본 구성 scss
- 부트스트랩 sass 관련 구성
- 공통 컬러 수정시
variables.scss
보다 상단에 작성해야 기본값 대신 적용된다. ($primary: #FDC000
)
variables.scss
내부엔 $primary: $blue !default;
처럼 작성되어 있다.
!default
라는 키워드로 기본값을 지정할 수 있고 해당 변수에 사용자가 기본값 대신 다른 값을 지정할 수 있다.
$primary: #FDC000;
@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 등의 변수를 찾지 못해 에러가 발생한다.