부트스트랩 Breadkpoint, 전역 스타일

부트스트랩 Breadkpoint(반응형)

사이트가 작아져도 내용을 온전히 보일 수 있는 것을 반응형이라고 부릅니다.

부트스트랩의 기능을 통해 쉽게 만들 수 있습니다.

<div class="user" @click="toAbout">
  <img src="~/assets/logo.png" :alt="name">
</div>

components폴더 안의 Header.vue의 template 추가부분입니다.

해당 이미지를 클릭하면 toAbout()메소드가 작동되며 about페이지로 이동됩니다.

.user {
    width: 40px;
    height: 40px;
    padding: 6px;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: $gray-200;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 40px;
    margin: auto;
    transition: .4s;
    &:hover {
      background-color: darken($gray-200, 10%);
    }
    img {
      width: 100%;
      padding: 2px;
    }
  }
  @include media-breakpoint-down(sm) {
    .nav {
      display: none;
    }
  }

components폴더 안의 Header.vue의 style 추가부분입니다.

위에 user 이미지를 추가한 후, breakpoint를 사용해서 반응형을 만들어봅니다.

 

 @include media-breakpoint-down(lg) {
  display: block;
  input {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .selects {
    margin-right: 0;
    margin-bottom: 10px;
    select {
      width: 100%;
    }
  }
  .btn {
    width: 100%;
  }
}

components폴더 안의 Search.vue의 style 추가부분입니다.

 

@include media-breakpoint-down(xl) {
    .poster {
      width: 300px;
      height: 300px * 3 / 2;
      margin-right: 40px;
    }
  }
  @include media-breakpoint-down(lg) {
    display: block;
    .poster {
      margin-bottom: 40px;
    }
  }
  @include media-breakpoint-down(md) {
    .specs {
      .title {
        font-size: 50px;
      }
      .ratings {
        .rating-wrap {
          display: block;
          .rating {
            margin-top: 10px;
          }
        }
      }
    }
  }

routes폴더 안의 Movie.vue의 style 추가부분입니다.

 

모든 컴포넌트에서 전역 스타일 가져오기

scss-loader github 참조

현재 이 프로젝트에서 만든 모든 컴포넌트 style부분에서 @import를 사용하고 있습니다.

scss-loader를 통해 설정한 후, 앞으로 컴포넌트마다 @import 안 해도 됩니다.

 

webpack.config.js 파일의 modules의 rules 수정부분입니다.

기존에 sass-loader를 좀 더 상세하게 options을 추가한 겁니다.

 

그리고 기타 파일에 있는 @import는 당연히 지워야됩니다.

dev를 리부팅하고 다시 확인하면 됩니다.