css - 生产开发模式 CSS 不匹配

Question

我正在使用添加了自定义 CSS 的 Vuetify 框架。我的元素是一个 webpack 模板。在开发模式下，我的自定义 CSS 更改适用于 HTML 元素，但在生产模式下，这些更改不会显示。我需要做什么才能在生产模式下应用我的自定义 CSS？

我已经尝试过重新构建元素。元素为Maven元素，使用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 类应该使面板更细，文本更小，而 .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 按预期工作，将箭头向右而不是向左移动

Answer 1

我已经设法通过将我添加到 Vuetify CSS 类的 CSS 样式放在前面并添加 !important 来确保它们得到应用来解决这个问题。