<p>Question assez simple, je pense que cela peut être lié à ce problème, mais dans Vue au lieu d'Angular. Le style CSS que j'essaie d'appliquer à mon carrousel Flickity ne s'affiche pas dans mon application Vue 3. Dans l'EDI, les styles sont grisés, mais lorsque je les modifie dans le navigateur via une inspection (par exemple en modifiant la largeur de la cellule du carrousel), cela fonctionne bien. </p> <p>Est-ce qu'il me manque une certaine importation CSS qui permettrait à mes fichiers CSS de modifier correctement l'apparence de la mise en page rendue dans le navigateur ? </p> <pre class="brush:html;toolbar:false;"><template> <div class="col d-block m-auto"> <flickity ref="flickity" :options="flickityOptions"> </flickity> </div> </modèle> <portée du style> .carrousel-cellule { couleur d'arrière-plan : #248742 ; largeur : 300 px ; /* pleine largeur */ hauteur : 160px /* hauteur du carrousel */ marge droite : 10 px ; } /* positionner les points dans le carrousel */ .flickity-page-dots { en bas : 0px ; } /* cercles blancs */ .flickity-page-dots .dot { largeur : 12px ; hauteur : 12px ; opacité : 1 ; fond : blanc ; bordure : 2px blanc uni ; } </style> ≪/pré>

<style scoped>
:deep(.carousel-cell) {
  background-color: red !important;
  width: 300px !important;
  height: 160px !important;
  margin-right: 10px !important;
}

/* position dots in carousel */
:deep(.flickity-page-dots) {
  bottom: 0px;
}
/* white circles */
:deep(.flickity-page-dots .dot) {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: blue;
  border: 2px solid white;
}
</style>