I am using Vuetify
framework with custom CSS added to it. My project is a webpack template. In development mode, my custom CSS changes apply to the HTML elements, but in Production mode, those changes are not displayed. What would I need to do to have my custom CSS apply in Production mode?
I have already tried re-building the project. The project is a Maven project, running with 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>
.v-expansion-panel__header
class should make the panels slimmer and the text smaller, while .theme--light.v-expansion-panel .v-expansion-panel__container .v-expansion-panel__header .v-expansion-panel__header__icon .v-icon
and .v-expansion-panel__container--active > .v-expansion-panel__header .v-expansion-panel__header__icon .v-icon
should make the arrow that comes with the framework component white. Funnily enough, .v-expansion-panel__header__icon
works as intended, moving the arrow to the right rather than to the left
I have managed to solve the issue by prepending the CSS styles I have added to the Vuetify
CSS classes and also adding !important
to make sure they get applied.