CODEWITHSUNDEEP
javascriptcssvue.jsvue-component
Ghunhee Shin
Ghunhee Shin

Reputation: 25

how can I apply vue library's CSS?

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 :)

Upvotes: 1

Views: 64

Answers (1)

Charles Lavalard
Charles Lavalard

Reputation: 2321

You can either add a .css file in your assets and declare it in your vue.config.js so you can use those styles

or remove the scoped from your <style> tag

Upvotes: 1

Related Questions