如何应用 vue 库的 CSS？

Question

我创建 vue 组件库。
从功能上讲，它可以工作，但 css 不起作用。
如何应用库的组件？

这是代码。

库组件：

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

应用组件：

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

如何应用库的 CSS？我试过那个库的 CSS 转向不，但它没有帮助。

感谢您的收看:)

Answer 1

您可以在您的资产中添加一个.css 文件并在您的vue.config.js 中声明它，以便您可以使用这些样式

或从您的<style> 标签中删除scoped