Question

我刚刚注意到我的Vue / Nuxt应用在构建后未应用某些组件样式。

样式将按预期在DEVELOPMENT中应用，但是一旦部署，它们就不会出现。

组件中的其他样式都很好呈现。

Dev Render：

产品渲染：

使用<style>标签在组件中应用样式。

<style lang="scss">
    .listing-wrapper {
        display: grid;
        grid-template-columns: 1fr;

        @media (min-width: 1024px) {
            grid-template-columns: 50vw 50vw;
        }
    }

    .listing-intro {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;

        @media (min-width: 1024px) {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 1;
            grid-row-end: 2;
        }
    }

    .listing-map {
        position: relative;
        background-color: #cccccc;
        text-align: center;
        align-items: center;
        justify-content: center;

        @media (min-width: 1024px) {
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 2;
        }

        .explore-map {
            width: 100%;
            height: 100%;

            > div {
                min-height: 50vh;
                height: auto;
            }
        }
    }
</style>

模板：

<template>
    <div>
        <layout-hero :pageRef="pageContent[0].id"></layout-hero>
        <main class="main listing-page">
            <h1 v-html="pageContent[0].title.rendered + ' around Karratha'"></h1>
            <div class="listing-wrapper" v-if="pageContent[0].id != 68">
                <section v-if="pageContent[0].content.rendered" class="listing-intro listing-content-block" v-html="pageContent[0].content.rendered"></section>
                <section class="listing-map">
                    <layout-map :mapVersion="'activity-map'" :mapCategory="pageContent[0].title.rendered" :zoomVal="7"></layout-map>
                </section>
            </div>
            <div v-else>
                <div class="listing-wrapper">
                    <section v-if="pageContent[0].content.rendered" class="listing-intro listing-content-block full-width" v-html="pageContent[0].content.rendered"></section>
                </div>
            </div>
        </main>
    </div>
</template>

与class和v-if位于同一个div是否有关？

Answer 1

经过两周的扎实工作，离开一天后，我发现问题是由于地图组件中的样式覆盖了父组件样式。

尽管清除了浏览器缓存并清除了应用程序缓存，但我仍然在本地开发人员和现场制作人员之间产生分歧。

更新：问题是由于scoped被包含在地图组件样式块中。现在它可以按预期运行。

感谢您的所有建议。

一些组件样式未包含在构建中

1 个答案: