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

Question

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?

Michael Harris · Accepted Answer · 2022-02-10 01:59:54Z

1

This worked:

App.vue

...

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

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

answered Feb 10, 2022 at 1:59

Michael Harris

2724 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kablam Over a year ago

I think you could even just put :root { } in your styles, to override the global styles globally. Perhaps in a dedicated css file though, not sure how that is looked upon in Vuejs nowadays. In any way, you can mark your own answer as accepted here :)

Michael Harris Over a year ago

I think I tried that, and I don't think it worked, but don't quote me... my goldfish memory doesn't go back that far.

Collectives™ on Stack Overflow

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

1 Answer 1

App.vue

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

App.vue

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related