본문 바로가기

Vue 프로젝트를 진행할 때 Bootstrap의 css원본인 SCSS를 활용하면 많은 좋은 점들이 있습니다. 결과물인 css만 사용할 경우는 크게 고민할 필요가 없지만 SCSS를 사용할 경우는 파일 용량과 트래픽 관점에서 몇가지 고려해야 할 사항들이 있습니다.

SCSSLESS같은 것을 CSS프리프로세서라고 하는데 CSS를 마치 프로그램처럼 사용할 수 있게 해주는 것이라 보시면 됩니다. CSS 프리프로세서에 대해서는 아래 포스팅을 참조하시면 도움이 되실 것입니다.

CSS 프리프로세서인 LESS 사용하기 바로가기

Bootstrap도 SCSS라는 프리프로세스를 사용하는데, Vue 프로젝트에 bootstrap의 SCSS를 불러와 사용한다면 bootstrap의 다양한 변수와 Functions, mixin 등을 활용 할 수 있게 됩니다.

Bootstarp 설치

먼저 npm이나 yarn을 통해서 Bootstrap패키지를 설치합니다.

  • npm으로 설치할 경우는 npm install bootstrap --dev-save
  • yarn으로 설치할 경우는 yarn add bootstrap -D

Styles에 대한 파일 만들기

Vue프로젝트에서 bootstrap SCSS를 사용 하려면 기본적으로 아래와 같이 5개의 파일을 만들어 줘야 합니다.

  • variables.scss : 공통변수로 사용
  • bootstrap.scss : 사용하고자 하는 부트스트랩의 모듈을 불러옴
  • bootstrap_global.scss : 부트스트랩 모듈 중 변수, 함수, Minin을 불러옴
  • common.scss : 프로젝트 전체에서 사용할 공통 SCSS
  • app.scss : 위의 파일들을 프로젝트에 적용하는 파일

variables.scss (필수)

프로젝트 전체에 사용할 변수를 정의 하는 곳입니다. 여기에 정의된 변수는 프로젝트의 어느 곳에서나 사용할 수 있기 떄문에 디자인의 통일성을 줄 수가 있습니다.
해당 변수는 Bootstrap에 정의된 변수값을 덮어쓸 수 있습니다.

// 사용자 variable (예제)
////////////////////////////////////////\
$white: #ffffff; 
$gray-100: #f5f5f5;
$gray-200: #e4e4e4;
$black: #000000;

$theme-color-main: #40b7f6;
$theme-color-sub: #daedf5;
$theme-color-accent: #cb5cc5;

$body-bg: $white;
$body-color: $theme-color-text1;
$link-color: darken($body-color, 25%);


// 부트스트랩 variable overrides (예제)
/////////////////////////////////////////
$font-family-sans-serif: "Noto Sans KR", sans-serif;

$font-size-base: 1rem; 
$font-size-base-contents: 1.15rem; 

$font-size-2xs: $font-size-base * 0.65;
$font-size-xs: $font-size-base * 0.775;
$font-size-sm: $font-size-base * 0.875;
$font-size-lg: $font-size-base * 1.25;
$font-size-xl: $font-size-base * 1.5;
$font-size-2xl: $font-size-base * 1.75;
// 등등...

bootstrap.scss (필수)

설치한 부트스트랩을 불러오는 파일입니다. 전체를 한번에 import해 올 수도 있지만 이럴경우 필요없는 모듈까지 설치되어 css파일의 용량이 증가하기 때문에 Product모드일 경우는 좋지 않습니다. 부분 로딩으로 사용한 모듈만 활성화시키는 것이 좋습니다.

// 전체 로딩
/////////////////////////////////
// @import "~bootstrap/scss/bootstrap";


// 부분 로딩
/////////////////////////////////
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
// @import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
// @import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
// @import "~bootstrap/scss/breadcrumb";
// @import "~bootstrap/scss/pagination";
// @import "~bootstrap/scss/badge";
// @import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
// @import "~bootstrap/scss/progress";
// @import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
// @import "~bootstrap/scss/tooltip";
// @import "~bootstrap/scss/popover";
// @import "~bootstrap/scss/carousel";
// @import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
// @import "~bootstrap/scss/print";

bootstrap_global.scss (필수)

Bootstrap의 SCSS파일 중 변수나 함수가 정의된 파일을 불러오는 파일입니다.
아래의 3개의 파일 functions, variables, mixins은 bootstrap에서 SCSS의 정의를 내리는 파일이라 100번을 반복해서 import해도 컴파일된 파일에는 포함되지는 않습니다.

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

common.scss (옵션)

프로젝트 전체에 공통으로 적용되는 SCSS입니다.
필요하지 않으면 없어도 되는 파일입니다.

// 예제 Class를 그냥 작성해 봤습니다. 
.loader_wrap {
    color: $theme-color-main;
    display: flex;
    align-items: center;
    min-height: 500px;
}

app.scss 만들기 (필수)

위에 정의된 파일중 한번만 불러와야 하는 파일들을 모아서 main.js에 적용해주는 파일입니다.

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

vue.config.js 세팅

설치된 Bootstrap의 공통 변수는 vue.config.js에서 선언을 해주면 됩니다.
vue.config.js에서 선언을 하면 프로젝트 내 모든 컴포넌트에서 동일하게 사용할 수 있게 됩니다. 다만 고려해야 할 점은 vue.config.js에 선언된 내용은 컴포넌트의 갯수만큼 반복 실행되기 때문에 의도치 않게 CSS의 결과물이 중복되어 엄청 커질 수 가 있습니다. 그래서 여기에 선언되는 scss파일은 여러번 실행해도 파일크기에 영향을 미치지 않는 functions.scss, variables.scss, mixins.scss같은 파일만 등록해야 합니다.

   module.exports = {
        css: {
            loaderOptions: {
                scss: {
                    prependData: `
                        @import "@/assets/styles/_variables.scss";
                        @import "@/assets/styles/_bootstrap_global.scss";
                    `,
                },
            },
        },
    };

main.js 세팅

main.js파일에는 app.scss를 import 합니다.

import App from "./App.vue";
import Vue from "vue";
import router from "./routes";
import store from "./store";

import "@/assets/styles/app.scss"; // 이래야 SCSS를 한번만 로딩함

new Vue({
    el: "#app",
    router,
    store,
    render: (h) => h(App),
});

컴포넌트에서 사용하기

이제 모든 SCSS의 기본세팅이 완료되었습니다. 이제 Vued의 각 컴포넌트에서 이 SCSS의 변수를 활용하여 사용할 수 있습니다. 나중에 프로젝트의 메인 컬러를 변경할 경우 variables.scss 에서 $theme-color-main의 값만 바꿔주고 빌드를 하면 전체의 메인 컬러가 일괄로 수정이 됩니다.

예제

cart.vue

<template>
    <div class="cart_wrap">
    </div>
</template>

<script></script>

<style lang="scss" scoped>
.cart_wrap {
    color: $theme-color-main;
    background: $theme-color-main;

    .title {
        font-size: $font-size-xs;
    }
}
</style>

my.vue

<template>
    <div class="my_wrap">
    </div>
</template>

<script></script>

<style lang="scss" scoped>
.my_wrap {
    color: $gray-200;
    background: $white;

    .title {
        font-size: $link-color;
    }
}
</style>

어쩌다보니여기까지

고급지게 만들어 저렴하게 배포는 공작소