Vue3 - 如何在导入 node_modules css 文件后覆盖 styles？

Question

我有一个使用库https://github.com/ismail9k/vue3-carousel的标准 Vue3 应用程序。

在我的App.vue文件中，我有以下内容，这是使用该库所必需的：

<style>
@import "~vue3-carousel/dist/carousel.css";
</style>

因为我不想使用库的默认 colors，所以我试图覆盖一些 styles。

该库在:root上定义了一些 colors，例如：

--vc-clr-primary: #333333;
--vc-pgn-background-color: var(--vc-clr-primary);

然后，我最终要覆盖的样式是：

.carousel__pagination-button {
  ...
  background-color: var(--vc-pgn-background-color);
}

所以，我假设我想覆盖其中一个变量，或者 class 本身。 在我的Component.vue文件中，我有以下内容：

<style scoped>
.carousel__pagination-button {
  background-color: #999999 !important;
}
</style>

但这没有任何作用。

我不关心我在哪里覆盖这些 colors，因为我将在整个网站上使用相同的 colors，但无论我在何处或如何尝试覆盖它们，我都无法弄清楚如何覆盖它们。

我究竟做错了什么？

Answer 1

这有效：

App.vue

...

<style>
#app {
  --vc-pgn-background-color: #mycolor;
}

@import "~vue3-carousel/dist/carousel.css";
</style>