본문 바로가기
program/Vue

Vue.js에서 CSS module 사용하기

by 믹스 2018. 10. 21.
반응형

그저 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 파일에서만 적용됩니다.

반응형

'program > Vue' 카테고리의 다른 글

Vuetify 2.x 버전으로 레이아웃 잡기  (0) 2020.09.26
vuetify theme color 설정  (0) 2018.11.07
Vue.js에서 CSS module 사용하기  (0) 2018.10.21
vuetify grid layout 들여다보기  (0) 2018.10.13
vue 설치부터 vuetify 설치까지  (0) 2018.08.21

댓글0