[Vue.js] 영화 검색 사이트 예제 - 02. BootStrap 구성

bootstrap은 이미 만들어져 있는 css 템플릿이라고 생각하면 된다.

 

BootStrap 설치

npm i bootstrap@next

1. BootStrap을 main.scss에서 import한다.

2. App.vue에 main.scss를 적용한다.

전역으로 적용돼야 하므로 scoped 옵션은 제거한다.

3. BootStrap 커스터마이징

참조) Sass · Bootstrap v5.1 (getbootstrap.com)

Sass

!default 플래그는 SCSS에서 제공하는 기능으로, 새롭게 지정되는 값이 있으면 기존 값을 무시하겠다는 의미를 가진다.

즉, BootStrap에서 지정한 '파란색'의 Primary 색상을 사용자 임의로 수정할 수 있다는 의미.

 

상기 코드 중 //Required 파트를 복사하여 main.scss에 붙여넣는다.

주의할 점은 main.scss가 /src/scss/ 내부에 있으므로 경로를 한번 더 나가야된다는 것이다.

default 값은 /node_modules/bootstrap/scss/_variable.scss에서 확인할 수 있다.

primary 색상을 재지정하려면, import variables 파트 위에 작성해야 제대로 적용된다.

그러므로 일반적으로 default 변수들을 재지정하는 파트는 최상단에 정의하는 것이 좋다.

default 값

default 값 재지정

만약 $theme-colors와 같은 속성 객체를 불러와서 선언할 때, 하나라도 참조를 하는 속성이 있다면 variables 밑에 선언해야한다.

만약 모든 항목을 사용자 임의 색상으로 지정하게 되면 위에 선언하는 것이 좋다.