生产开发模式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 class 应该使面板更细，文本更小，而 .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不匹配

Production and development mode CSS mismatch

css

production

webpack

vue.js