Skip to content

Vue Loader

webpack loader for Vue Single-File Components.

Features

다음은 vue-loader가 제공하는 여러가지 유용한 기능입니다.

  • 기본적으로 ES2015를 지원합니다.
  • 각 Vue 컴포넌트 마다 서로 다른 webpack 로더를 사용할 수 있습니다. 예를들면<style>

    에 Sass, <template>에 Jade로 각각 설정 가능합니다.

  • <style>

    과 <template>에서 참조된 정적 Asset 파일을 모듈로 취급하고 webpack 로더로 처리합니다.

  • 각 컴포넌트마다 지정된 CSS를 시뮬레이트 할 수 있습니다.
  • 개발 중에 컴포넌트 핫 리로딩을 지원합니다.

한 마디로 webpack과 vue-loader의 결합은 Vue.js 어플리케이션을 제작하기위한 현대적이고 유연하며 매우 강력한 작업환경을 제공합니다.

Single File Components 

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

Scoped CSS

예를 들면 이런거: 

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

vue style에서 scoped 속성을 가지고있을 때, CSS는 현재 컴포넌트의 엘리먼트에서 적용이된다.

작동 원리

다음와 같은 scoped style 은 Shadow DOM과 같이 작동한다. 

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

최종 스타일은 다음과 같이 추가된다. 

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div data-v-f3f3eg9 class="example">hi</div>
</template>

따라서 example 클래스의 data-v-f3f3eg9 속성을 갖고 있는 Element 를 찾게 된다.

Deep Selector

scoped 스타일의 선택기를 "깊게"(즉, 자식 구성 요소에 영향을 미치게 하려면) >>>결합 자를 사용할 수 있습니다 . 

<style scoped>
.a >>> .b { /* ... */ }
</style>

위의 내용은 다음과 같이 컴파일됩니다. 

.a[data-v-f3f3eg9] .b { /* ... */ }

Sass와 같은 일부 전처리기는 >>>를 제대로 구문 분석 하지 못할 수 있습니다. 이러한 경우 대신 /deep/2 또는 ::v-deep결합 자를 사용할 수 있습니다. 둘 다 >>>의 대한 별칭이고 정확히 동일하게 작동합니다. 위의 예를 기반으로 이 두 표현식은 동일한 출력으로 컴파일됩니다. 

<style scoped>
.a::v-deep .b { /* ... */ }
</style>

<style scoped>
.a /deep/ .b { /* ... */ }
</style>

샘플 코드 목록:

Troubleshooting

Vue 컴포넌트에서 scoped style 적용 안되는 현상

#Deep Selector를 사용하면 된다.

See also

Favorite site

References

  1. TOAST_UI_-_how-to-watch-nested-data-vue.pdf ↩

  2. Deprecated 되었다는 글이 확인되었다. 링크 ↩