Vue module.css 사용하기

1. style 에 module를 적습니다.

<style module>
.menu {
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    width: 180px;
    background: bisque;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}
</style>

 

2. class 태그를 :class를 붙이고 클래스명에 $style를 붙입니다.

    <div :class="$style.menu">
        <p>{{ menu }}</p>
        <p> {{ price }} 원</p>
    </div>

 

3. 결과

- 해당 css 속성에 고유값이 붙여서 해당 컴포넌트내에서만 작동을 하게 됩니다.