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>