Vue 프로젝트 Bootstrap 구성

 

구성 순서

 

1. npm i bootstrap@next (부트스트랩 설치)

2. src/scss/main.scss 파일 생성

/* main.scss */

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

3. App.vue 파일에 main.scss 연결

/* App.vue */

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

4. main.scss 커스터 마이징

/* main.scss */

// Default variable overrides
$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/bootstrap";