javascript - 某些组件样式未包含在构建中

Question

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

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

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

开发渲染:

产品渲染:

使用 <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

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

即使在清除浏览器缓存和清除应用程序缓存之后，我仍然发现本地开发和实际生产之间存在差异。

更新:问题是由于 scoped 包含在 map 组件样式 block 中。它现在按预期工作。

感谢您的所有建议。