source

vue-multicelect가 CSS를 로드하지 않음

gigabyte 2022. 9. 1. 23:20
반응형

vue-multicelect가 CSS를 로드하지 않음

vue-multicelect 컴포넌트(b15)를 vue-cli(웹팩 템플릿)와 함께 사용하고 있지만 컴포넌트의 CSS가 로드되지 않고 컴포넌트가 잘못 렌더링됩니다.감 잡히는 게 없어요?

내 코드:

<template>
  <div>
      <div class="select2-container select2-container-multi full-width">
        <multiselect
          class="form-control form-control-select textarea" 
          :class="{ 'has-error': showError }"
          :options="localOptions"
          :label="labelKey"
          track-by="id"
          :multiple="multiple"
          :selected="value"
          :searchable="true"
          :placeholder="placeholder" 
          :loading="loading"
          :custom-label="formatLabel"
          :disabled="disabled"
          :readonly="readonly"
          @input="updateSelected"
          @close="blur">
        </multiselect>
      </div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  mixins: [inputMixin],

  components: {
    Multiselect
  }
}
</script>

멀티 셀렉트가 렌더링되어 모든 것이 스타일 없이 적용됩니다.

마지막에 css를 따로 추가해야 하기 때문에 다음과 같이 파일을 작성할 수 있습니다.

<template>
  <div>
      <div class="select2-container select2-container-multi full-width">
        <multiselect
          class="form-control form-control-select textarea" 
          :class="{ 'has-error': showError }"
          @input="updateSelected"
          @close="blur">
        </multiselect>
      </div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  mixins: [inputMixin],
      components: {
    Multiselect
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

언급URL : https://stackoverflow.com/questions/42887724/vue-multiselect-does-not-load-css

반응형