如何应用 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>

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

谢谢观看:)

Answer 1

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

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

如何应用 vue 库的 CSS？

how can I apply vue library's CSS?

javascript

css

vue.js

vue-component