Seems like a straightforward problem, it reminds me of this issue discussed on Stack Overflow but in relation to Vue instead of Angular. I am facing an issue where the CSS styling I'm trying to apply to my Flickity carousel is not being rendered correctly in my Vue 3 application. Interestingly, in the IDE the styles appear greyed out, but when I make changes via browser inspection (such as adjusting the width of carousel-cells), the changes take effect.
I wonder if there's a missing CSS import that's preventing my CSS file to properly modify the visual appearance of my layout when rendered in a web browser?
<template>
<div class="col d-block m-auto">
<flickity ref="flickity" :options="flickityOptions">
</flickity>
</div>
</template>
<style scoped>
.carousel-cell {
background-color: #248742;
width: 300px; /* full width */
height: 160px; /* height of carousel */
margin-right: 10px;
}
/* position dots in carousel */
.flickity-page-dots {
bottom: 0px;
}
/* white circles */
.flickity-page-dots .dot {
width: 12px;
height: 12px;
opacity: 1;
background: white;
border: 2px solid white;
}
</style>