Search code examples
cssvue.jswebpackproduction

Production and development mode CSS mismatch


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


Solution

  • 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.