[개발이슈] vue.js 외부라이브러리 css custom 하기

vue.js 외부라이브러리 css 커스터마이징하기 (vue-slick)

들어가기

vue 를 사용하다 보면 slider나 multiselect 같은 외부라이브러리를 사용할 때가 있다. 이번 예시는 vue-slick을 예로 들어서 설명해 보겠다.

본론

vue-slick을 사용하여 슬라이더를 만드려고 한다. 우선 npm을 이용해 설치한다.

$ npm install --save vue-slick

슬라이더를 사용할 컴포넌트에 가서 vue-slick을 import 시킨다.

<template>
  <div>
    <slick id="carousel" ref="slick" :options="slickOptions">
      <a href="http://placehold.it/200x100"><img src="http://placehold.it/200x100" alt=""></a>
      <a href="http://placehold.it/200x100"><img src="http://placehold.it/200x100" alt=""></a>
      <a href="http://placehold.it/200x100"><img src="http://placehold.it/200x100" alt=""></a>
      <a href="http://placehold.it/200x100"><img src="http://placehold.it/200x100" alt=""></a>
      <a href="http://placehold.it/200x100"><img src="http://placehold.it/200x100" alt=""></a>
    </slick>
  </div>
</template>
<script>
  import Slick from 'vue-slick';

  export default {
    components: {
      Slick
    },
    data() {
      return {
        slickOptions: {
          slidesToShow: 1,
          dots: true
        }
      }
    }
  }
</script>
<style scoped>
  #carousel .slick-list {
    border-radius: 12px;
    overflow: hidden;
  }

  #carousel .slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
  }
</style>

문제가 있다. style 태그안에 작성한 커스터마이징 코드가 동작하지 않는다.

원인

정확하지는 않지만 scoped 즉 범위를 가지는 css 는 변환될때 data-v-fae5bece와 같은 속성을 가지게 된다. 하지만 외부로부터 include 되어 만들어지는 컴포넌트들은 해당 속성을 가질 수 없기때문에 맞는 selector를 찾지 못한다.

해결

scoped 를 사용하지 않는 스타일 태그에 해당 css 를 작성하면 된다.

<style scoped>
  //범위를 가지는 CSS
</style>
<style>
  #carousel .slick-list {
    border-radius: 12px;
    overflow: hidden;
  }

  #carousel .slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
  }
</style>