[Vue.js][Ch4][영화검색 사이트] Bootstrap 구성

1. Bootstrap 5 버전  일반의존성 설치

npm i bootstrap

2. scss/main.scss 파일 작성 - 설치한 bootstrap 연결

 /* .scss 확장자 생략 */
@import "../../node_modules/bootstrap/scss/bootstrap";

3. App.vue 컴포넌트에 main.scss 연결

<style lang="scss">
@import "~/scss/main";
</style>

• 모든 컴포넌트에서 style이 적용됨

Bootstrap Customize

Bootstrap 페이지 > 상단 Docs > Customize > Sass >Variable defaults 확인

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

=> 즉, Bootstrap에서 지정한 파랑색이 아닌 primary 색상을 우리가 외부에서 수정할 수 있다는 의미이다.

main.scss에서 primary 색을 내가 원하는 색상으로 재정의

// Default variable overrides
$primary: #FDC000;    // primary라는 이름을 갖는 변수들이 #FDC000로 활용됨

// Required
@import "../../node_modules/bootstrap/scss/functions";    // 경로를 상대경로로 바꿔줘야 함.
// Required
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";

@import "../../node_modules/bootstrap/scss/bootstrap";  // .scss 확장자 생략

 

! 재정의하려는 색상은 @import "../../node_modules/bootstrap/scss/variables"; 코드 전에 정의되어야 한다 !

(variables에 !default 플래그를 지정하는 scss가 있기 때문에)

따라서, 재정의하려는 내용은 Required 코드 위에 선언하는 것을 권장한다!