生产和开发模式 CSS 不匹配答案

【问题标题】：Production and development mode CSS mismatch生产和开发模式 CSS 不匹配
【发布时间】：2019-06-03 01:34:48
【问题描述】：

我正在使用添加了自定义 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 按预期工作，将箭头向右而不是向左移动

【问题讨论】：

您能否在您的开发工具中检查这是否是 CSS 顺序的问题？也许您的值会被默认值覆盖。这可以通过 !important 解决（请不要 :D ）或者甚至可以使用范围样式（只需将 scoped 属性添加到您的样式标签。
@HerrSiering 我尝试过使用 scoped，它所做的只是从组件中删除所有 CSS，包括 Vuetify CSS。 !important 也不起作用，值仍然会被覆盖。
如果它们被覆盖，至少它们在那里 :) 您可以通过链接相同的类（例如 .title-header.title-header.title-header – 两次、三次、更频繁）或通过在它们前面加上body #app .title-header（#app 是我对你的应用容器的猜测），这样它们就不会被覆盖，而是“赢得”特异性之战:)
@HerrSiering 我会试一试，看看它是否有效。谢谢。

标签： css vue.js webpack production

【解决方案1】：

我已经设法解决了这个问题，方法是预先添加我添加到 Vuetify CSS 类的 CSS 样式，并添加 !important 以确保它们被应用。

【讨论】：