Currently, I am utilizing the Vuetify framework coupled with custom CSS for a project developed using a webpack template. During development mode, my custom CSS modifications are successfully applied to HTML elements; however, in Production mode, these changes do not render. Can you advise on what steps I should take to ensure my custom CSS is activated in Production mode?
I have attempted to re-build the project without success. The project itself is a Maven project and operates within SpringBoot.
<template>
<div>
<div>
<v-expansion-panel>
<v-expansion-panel-content v-for="(item,i) in dashboardTitles" :key="i">
<div slot="header">
<div class="title-header">
{{item.title}}
</div>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
</div>
</div>
</template>
<style>
.v-expansion-panel__header {
background-color: #005f81;
margin: 5px;
padding: 10px;
color: white;
min-height: 20px;
max-height: 30px;
font-size: 18px;
}
.title-header {
margin-left: 30px;
}
.theme--light.v-expansion-panel .v-expansion-panel__container .v-expansion-panel__header .v-expansion-panel__header__icon .v-icon,
.v-expansion-panel__container--active > .v-expansion-panel__header .v-expansion-panel__header__icon .v-icon {
color: white;
}
.v-expansion-panel__header__icon {
position: absolute;
float: left;
outline: none;
}
</style>
Furthermore, the .v-expansion-panel__header class aims to make the panels slimmer and reduce font size, whereas
.theme--light.v-expansion-panel .v-expansion-panel__container .v-expansion-panel__header .v-expansion-panel__header__icon .v-icon.v-expansion-panel__container--active > .v-expansion-panel__header .v-expansion-panel__header__icon .v-icon.v-expansion-panel__header__icon functions properly by shifting the arrow icon to the right rather than the left.