构建中未包含的某些组件样式答案

【问题标题】：Some component styles not included in build构建中未包含的某些组件样式
【发布时间】：2019-05-28 04:11:27
【问题描述】：

我刚刚注意到我的 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 上有关？

【问题讨论】：

当您签入开发工具时，类名是否应用到了正确的位置？这是开始调试的好地方。
@DavidWeldon 对不起，我应该提到，在生产版本的 div 上没有呈现类名。他们在开发版本上很好。就好像它根本没有拾取它们，而是拾取组件中的其他样式。我不明白为什么它部分工作。
“生产”是指“在生产服务器上”还是在本地计算机上的“生产模式”？如果是前者，可能是你的代码没有被正确推送或者是旧版本只是缓存在你的浏览器中？
哪些款式不包括在内？它们与网格有关吗？
@Soleno 这是我上面包含的样式没有被包含在内。其他一切都是如此，并且在另一个模板上可以正常加载相同类型的样式。

标签： javascript css vue.js nuxt.js

【解决方案1】：

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

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

更新：问题是由于 scoped 包含在地图组件样式块中。它现在按预期工作。

感谢您的所有建议。

【讨论】：

你能不能更具体一点……我很想知道你怎么能解决这个问题？