how can I apply vue library’s CSS?

  css, javascript, vue-component, vue.js

I create vue component library.

Functionally, it work but css doesn’t work.

How can I apply library’s components?

this is the code.

Library Component:

<template>
    <div>
      <div class="authorsPreview" v-for="(item, index) in authors" :key="index">
        <span class="createdAuthor">{{ item.name }} / {{ item.name_kana }}</span>
        <div class="deleteAuthorBtn" v-on:click="deleteEvent" :index="index">
        x
        </div>
      </div>
    </div>
</template>

<script>
export default {
    props: [
        'authors'
    ],
    methods: {
        deleteEvent(e) {
            const index = e.target.getAttribute('index');
            this.$emit('deleteAuthor', index);
        },
    }
}
</script>

<style scoped>
.authorsPreview{
    ...
}
.createdAuthor {
    ...
}
.deleteAuthorBtn {
    ...
}
</style>

Apply Component:

<template>
  <div class="epub-container">
    ...codes...
            <authors-preview v-bind:authors="authors" v-on:deleteAuthor="deleteAuthor"></authors-preview>
     ...codes...      
  </div>
</template>

<script>
import AuthorsPreview from 'authors_preview_lib';

export default {
    components: {
        AuthorsPreview
    },
    ...codes...
}
</script>

<style scoped>
 ...This Component's code...
</style>

What can I do to apply library’s CSS? I’ve tried that library’s CSS
turn to not but It doesn’t help.

thank you for watching 🙂

Source: Ask Javascript Questions

LEAVE A COMMENT