Question

我正在使用Vuetify框架，并添加了自定义CSS。我的项目是一个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以确保它们被应用，我设法解决了这个问题。

生产开发模式CSS不匹配

1 个答案: