Vue.js에서 CSS module 사용하기

그저 module 을 사용하면서 알게 된 내용에 관한 메모입니다. 우선 module을 사용하기 위해선 vue-loader를 사용하여야 합니다. vue-loader를 사용하게 되면 css 이외에도 scss와 같은 다양한 방식이 적용가능해집니다. 공식 문서는 본가 사이트에서 확인 가능합니다.

<style>
    .class { ... }
</style>

우선 vue에서 CSS를 사용할 경우는 그대로 사용하면 되지만, SASS/SCSS를 사용할 경우에는 lang="scss" 를 추가 시켜주어야 합니다.

<style lang="scss">
<style lang="scss" scoped>
<style lang="scss" module>

또한 CSS를 사용하는 방식은 크게 기본방식과, scoped나 module방식이 있다고 알고 있습니다. 이 방법들 중에서 이번에 module을 사용하면서 몇가지를 알게 되었습니다.

// 일반적인 방식에는 딱히 규제가 없지만..
<style lang="scss">
<div class="example-box-type">...</div>
<div class="example_box_type">...</div>
<div class="exampleBoxType">...</div>

// module 사용 방식에는 규제가 있다.
<style lang="scss" module>
<div :class="$style.example_box_type">...</div>
<div :class="$style.exampleBoxType">...</div>

1. class명에 '-^dash'를 사용할 수 없습니다. 대신에 '_^underscore'를 사용하거나 camelCase를 사용합니다.
2. module용 class를 html에 적용시키기 위해서 :class처럼 적용시키고 해당 class 앞에 $style을 적용시켜줘야 합니다.
3. 하나의 vue 파일에 서로 다른 방식의 CSS도 적용가능합니다.

<template>
    <div class="class1" :class="$style.class2" >
        ...
    </div>
<template>

<style>
    .class1 { ... }
</style>

<style module>
    .class2 { ... }
</style>

이렇게 두가지를 적용시켜 적용시킬 수도 있습니다. 최종적으로, 예를 들어 Example.vue 라는 파일에서 module을 사용한 방식의 파일은 렌더링이 끝난 소스의 class를 확인하면 다음과 같아집니다.

<div class="Example_class2_J0TNq">

Vue 파일명 + module 클래스 + 랜덤문자의 조합으로 만들어지며 해당 vue 파일에서만 적용됩니다.