CODEWITHSUNDEEP
cssvue.js
Michael Harris
Michael Harris

Reputation: 265

Vue3 - How to override styles after importing node_modules css file?

I have a standard Vue3 app using the library https://github.com/ismail9k/vue3-carousel.

In my App.vue file, I have the following, which is required to use the library:

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

Since I don't want to use the library's default colors, I'm trying to override some styles.

The library defines some colors on :root, such as:

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

Then, the style that I want to ultimately override is:

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

So, I assume that I want to override either of the variables, or the class itself. In my Component.vue file, I have the following:

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

But that doesn't do anything.

I don't care where I override these colors, because I'll use the same colors throughout the website, but I can't figure out how to get them to override no matter where or how I attempt to override them.

What am I doing wrong?

Upvotes: 1

Views: 2838

Answers (1)

Michael Harris
Michael Harris

Reputation: 265

This worked:

App.vue

...

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

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

Upvotes: 1

Related Questions